此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
list-style-image
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
list-style-image 属性用来指定一个能用来作为列表元素标记的图片。
通常来说使用list-style较为方便。
语法
css
/* Keyword values */list-style-image: none;/* <url> values */list-style-image: url("star-solid.gif");/* Global values */list-style-image: inherit;list-style-image: initial;list-style-image: unset;值
<url>用来作为标记的图片的地址。
none说明没有图片被用作标记。如果这个值被设定，那么
list-style-type中定义的值会被取代。
形式语法
list-style-image =
<image>|
none
<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
示例
HTML
html
<ul> <li>Item 1</li> <li>Item 2</li></ul>CSS
css
ul { list-style-image: url("star-solid.gif");}结果
规范
| Specification |
|---|
| CSS Lists and Counters Module Level 3 # image-markers |