list-style-image - CSS: Cascading Style Sheets 编辑
The list-style-image
CSS property sets an image to be used as the list item marker.
It is often more convenient to use the shorthand list-style
.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.Note: This property is applied to list items, i.e. elements with
by default this includes display
: list-item;<li>
elements. Because this property is inherited, it can be set on the parent element (normally <ol>
or <ul>
) to let it apply to all list items.
Syntax
/* Keyword values */
list-style-image: none;
/* <url> values */
list-style-image: url('starsolid.gif');
/* Global values */
list-style-image: inherit;
list-style-image: initial;
list-style-image: unset;
Values
<url>()
- Location of image to use as the marker.
none
- Specifies that no image is used as the marker. If this value is set, the marker defined in
list-style-type
will be used instead.
Formal definition
Initial value | none |
---|---|
Applies to | list items |
Inherited | yes |
Computed value | none or the image with its URI made absolute |
Animation type | discrete |
Formal syntax
<url> | none
Examples
Setting list item images
HTML
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
CSS
ul {
list-style-image: url("https://www.wenjiangs.com/wp-content/uploads/2020/mozilla/starsolid.gif");
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Lists Module Level 3 The definition of 'list-style-image' in that specification. | Working Draft | Extends support to any <image> data type. |
CSS Level 2 (Revision 1) The definition of 'list-style-image' in that specification. | Recommendation | Initial definition |
Browser compatibility
BCD tables only load in the browser
See also
list-style
,list-style-type
,list-style-position
url()
function
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论