列表标记图片属性

最后更新：2026-09-13

list-style-image 列表标记图片属性

list-style-image 属性用于将自定义图片设置为列表项的标记，替代默认的圆点、数字等样式。默认值 none 表示不使用图片。它常用于给列表添加品牌化的小图标或装饰性箭头，提升视觉效果。

分类
初始值	none
继承	否
适用于
可动画
CSS 版本	CSS1
状态	标准

📝 语法

list-style-image: none | <image>;

⚙️ 取值

值	类型	描述
`none`	关键字	无图片
`<image>`	类型	自定义标记图片

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
list-style-image	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： list-style-image 无法控制图片大小，需要更灵活的效果时，建议用 ::before 伪元素配合 background-image 实现。

注意： 如果图片加载失败，列表标记会消失，建议同时设置 list-style-type 作为后备。

❓ 常见问题

Qlist-style-image 和 ::before 伪元素哪个更好？

A::before 更灵活，可控制图片大小、位置、间距和对齐，还能用字体图标；list-style-image 使用简单，但无法缩放图片、对齐受限。需要精确控制时用 ::before + background-image + background-size，只是快速替换标记时用 list-style-image。

Q如何让 list-style-image 的图片居中显示？

Alist-style-image 本身无法精确控制图片对齐，图片按原始尺寸绘制。要精确对齐，改用 li::before 插入 content: "" + background-image + background-position: center，配合 background-size 控制尺寸，即可按需居中缩放。

Qlist-style-image 图片加载失败会怎样？

A图片加载失败（路径错误、格式不支持或被拦截）时，列表标记会消失或回退显示。为避免列表项变成"光秃秃"，建议同时保留 list-style-type 作为后备，例如 list-style: disc url(bullet.png);，图片失效时仍显示圆点标记。

Q为什么 list-style-image 图片大小无法调整？

A因为该属性直接把图片按原始尺寸绘制在标记位置，CSS 没有提供缩放该标记图片的参数，也无法改变它的颜色。图片过大或过小都无法适配字号和排版。需要控制尺寸时，改用 li::before + background-image + background-size，或用内联 SVG 图标并设置宽高。