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>] 语法来控制列表项的标记图片：

• 5 cups chopped Porcini mushrooms
• 1/2 cup of olive oil
• 3lb of celery

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

使用 CSS 变量

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

<!-- [!code classes:list-image-(--my-list-image)] -->
<ul class="list-image-(--my-list-image)">
  <!-- ... -->
</ul>

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

移除标记图片

使用 list-image-none 工具类移除列表项上已有的标记图片：

<!-- [!code classes:list-image-none] -->
<ul class="list-image-none">
  <!-- ... -->
</ul>

响应式设计

使用 md: 等断点变体前缀，即可让 list-style-image 工具类仅在中等及以上屏幕尺寸下生效：

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

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