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
