CSS / list-style-image：图片标记、尺寸和备用标记

CSS list-style-image 为列表项的标记指定图像。通常在 ul 或 ol 上设置，并由其 li 项继承。如果没有可用的图像，则使用 list-style-type 标记，因此也要定义适当的备用标记。

list-style-image 的作用和值

初始值为 none，该属性是可继承的。标记属于具有 display: list-item 的元素，例如普通的 li 元素。通常在 ul 上设置它可以起作用，因为列表项会继承该值；此属性不会为 ul 本身添加背景图像。

在语法中，url() 是一个包含 URL 的函数，而不是字面文本 url。动画类型是离散的，这并不意味着两幅图像会平滑地相互变形。MDN：list-style-image 参考

可直接复制的完整示例

将以下完整代码保存为 UTF-8 编码的 list-marker.html 并在浏览器中打开。不需要库、服务器或单独的图像文件。SVG（Scalable Vector Graphics，可缩放矢量图形）是一种矢量图像格式；此示例在数据 URL 中嵌入了一个 16×16 的蓝色圆圈。英文单词是比较项。

<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>列表图片标记比较</title>
  <style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .image-list {
      list-style-type: square;
      list-style-position: outside;
      list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%230066cc'/%3E%3C/svg%3E");
      font-size: 20px;
      max-width: 22rem;
      padding-inline-start: 2rem;
    }
    .image-list li { margin-block: .5rem; }
    .large { font-size: 32px; }
    .reset { list-style-image: none; }
  </style>
</head>
<body>
  <h1>列表图片标记比较</h1>
  <h2>list-style-image</h2>
  <ul class="image-list"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>font-size: 32px</h2>
  <ul class="image-list large"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>list-style-image: none</h2>
  <ul class="image-list reset"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
</body>
</html>

预期结果是前两个列表中显示蓝色圆形标记，第三个列表中显示方形标记。只有第二个列表的字体大小会变为 32px。当第二个长项目换行时，比较外部标记与其文本的对齐情况。编辑文件后，保存并重新加载。

区分图片尺寸和文字大小

此SVG明确指定了宽度和高度为16，使图像标记的尺寸为 16×16 CSS 像素。将文本从20px增加到32px不会自动按比例放大该图像。同样，说每个标记图像总是使用其原始像素尺寸也是不准确的：当图像没有固有尺寸或比例时，大小可能会有所不同。

list-style-image 没有单独的标记宽度或高度参数。请准备一个小型标记资源或为 SVG 提供适当的尺寸。::marker 支持的属性也有限；在那里设置宽度和高度不能提供任意的图像大小。为了精确的尺寸和间距，可以考虑使用单独的背景图像或伪元素设计，同时保留列表语义和实际文本信息。MDN：::marker 支持的属性

移除图片并注意简写重置

要仅删除图像，请按以下方式设置 list-style-image: none。示例中保留了 list-style-type: square，因此会显示方形标记。比较变化并恢复原始的 url() 声明即可将图像恢复。备用标记也会在图像加载失败且没有可用图像时使用。

.image-list {
  list-style-image: none;
}

以下 list-style 简写也会重置被省略的图像组件。因此稍后应用它可能使先前指定的图片不再显示。检查是否有后续的简写覆盖，并根据您的意图使用单独属性或在简写中包含图像。

.image-list {
  list-style: square outside;
}

标记不显示时应检查什么

1. 检查图像 URL 和响应。在外部样式表中，相对 URL 会相对于该 CSS 文件解析，而不是 HTML 文件。style 元素中的 URL 则遵循文档的基础 URL。使用开发者工具的网络面板检查 404 响应和无效的图像格式。
2. 检查所选 li 元素的计算后的 list-style-image 和 display。检查是否有覆盖该值的 list-style 简写或优先级更高的规则。同时检查 display 是否已更改为如 flex 等，使得元素不再生成列表项标记。
3. 在 outside 定位情况下，不足的缩进或父元素的 overflow 设置可能会裁剪标记。检查列表的内边距和裁剪。如果站点策略阻止数据 URL，请将示例图像替换为允许的图像 URL。

嵌套列表也可以继承此属性。要从嵌套列表中移除图像，需要显式地将 list-style-image: none 应用于该列表，并将其 list-style-type 设置为所需的值。

保留列表语义和无障碍信息

这里的蓝色圆圈是装饰性的。将重要的意义（如完成情况、警告或评分）放在实际的列表项文本中，而不仅仅放在 CSS 图像中。CSS 标记不会提供 HTML img 元素那样的 alt 属性，因此不要因为假定图片会正常加载或被辅助技术读出，就省略必要文字。

给 ol 提供相同的图像标记会用图像替换其可见的数字。当读者需要步骤编号时，请保留原生数字。保留 ul、ol 和 li 的结构，并确保即使没有图像，项目及其顺序仍然可理解。W3C 图像列表标记的定义