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 |
浏览器兼容性
Loading…