list-style-image

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use the list-image-[<value>] syntax to control the marker image for list items:

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

使用 CSS 变量(Using a CSS variable)

¥Using a CSS variable

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

¥Use the list-image-(<custom-property>) syntax to control the marker image for list items using a CSS variable:

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

这只是 list-image-[var(<custom-property>)] 的简写，可自动为你添加 var() 功能。

¥This is just a shorthand for list-image-[var(<custom-property>)] that adds the var() function for you automatically.

删除标记图片(Removing a marker image)

¥Removing a marker image

使用 list-image-none 工具从列表项中删除现有标记图片：

¥Use the list-image-none utility to remove an existing marker image from list items:

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

响应式设计(Responsive design)

¥Responsive design

在 list-style-image 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：

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

请参阅 变体文档 详细了解如何使用变体。