list-style-image

用于控制列表项标记图像的实用工具。

类样式

类	样式
`list-image-[<value>]`	`list-style-image: <value>;`
`list-image-(<custom-property>)`	`list-style-image: var(<custom-property>);`
`list-image-none`	`list-style-image: none;`

list-image-[<value>]

list-style-image: <value>;

list-image-(<custom-property>)

list-style-image: var(<custom-property>);

list-image-none

list-style-image: none;

示例

使用 list-image-[<value>] 语法来控制列表项的标记图像

<ul class="list-image-[url(/img/checkmark.png)]">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

使用 list-image-(<custom-property>) 语法，使用 CSS 变量来控制列表项的标记图像

<ul class="list-image-(--my-list-image)">
  <!-- ... -->
</ul>

这只是 list-image-[var(<custom-property>)] 的简写，自动为您添加 var() 函数。

使用 list-image-none 实用程序从列表项中移除现有标记图像

<ul class="list-image-none">
  <!-- ... -->
</ul>

前缀a list-style-image 实用工具带有像 md: 这样的断点变体，仅在以下情况下应用该实用工具中等屏幕尺寸及以上

<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ...">
  <!-- ... -->
</div>

在变体文档中了解更多关于使用变体的信息。