list-style-image 属性用于放置图像而不是列表项标记。
如果图像具有固有的宽度和高度,它们将用作宽度和高度。
如果图像具有固有比率和固有高度/宽度,它们将用作宽度和高度。
缺失尺寸的使用值将根据提供的比率和尺寸计算。
如果图像具有固有比率和固有高度/宽度,则使用的高度/宽度将与提供的固有高度/宽度相同。
缺失维度的使用值将根据提供的比率和维度进行计算。
list-style-image 属性应用于显示设置为“list-item”的列表项和元素。
默认情况下,这包括 <li> 元素。
它也可以设置在父元素上:<ol> 或者 <ul>。
当图像无法显示时,将使用 list-style-type 属性。
初始值 | none |
---|---|
应用于 | 列出项目(item)(item)。 |
继承 | 可继承 |
可动画的 | 无效 |
版本 | CSS1 |
DOM 语法 | object.Style.ListStyleImage =“URL(”image.jpg“)”; |
CSS list-style-image 属性值说明
值 | 描述 |
---|---|
none | 意味着没有显示任何图像。将显示使用列表样式类型定义的列表标记而不是图像。这是此属性的默认值。 |
url | 用于提供图像的源URL,该源URL将被用作列表项标记。 |
initial | 使属性使用其默认值。 |
inherit | 从父母元素继承属性。 |
语法
list-style-image: none | url | initial | inherit;
list-style-image 属性示例:
<!DOCTYPE html> <html> <head> <title>文档的标题</title> <style> ul { list-style-image: none; } </style> </head> <body> <h2>List-style-image 属性示例</h2> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </body> </html>
带有图像源 URL 的 list-style-image 属性示例:
<!DOCTYPE html> <html> <head> <title>文档的标题</title> <style> ul { list-style-image: url("/onitroad.png"); } </style> </head> <body> <h2>List-style-image 属性示例</h2> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> </body> </html>
日期:2020-06-02 22:14:37 来源:oir作者:oir