css list-style-image 语法用法与实例

时间:2023-04-24 21:54:11

CSS list-style-image 属性用于指定列表项符号的图片。这个属性需要一个 URL 值,可以是相对路径或绝对路径,也可以是 base64 编码的数据 URL。如果您不想使用图片作为列表项符号,则可以使用 none 值。

以下是 list-style-image 的语法:

list-style-image: none|url|initial|inherit;
none:不使用图片作为列表项符号(默认值)。
url:指定一个图片 URL 作为列表项符号。
initial:将属性设置为它的默认值。
inherit:继承父元素的属性值。
例如,以下代码将无序列表的符号样式设置为一个自定义的图片:

ul {
list-style-image: url('custom-bullet.png');
}

在这个示例中,custom-bullet.png 是放置在与 HTML 文件相同的目录中的一张图片。如果您希望使用绝对路径或 base64 编码的数据 URL,则可以将其替换为相应的值。

另外,您可以在一个样式表中为多个列表指定相同的列表项图片,如下所示:

ul, ol {
list-style-image: url('common-bullet.png');
}

在这个示例中,所有无序列表和有序列表都使用名为 common-bullet.png 的图片作为列表项符号。这个技巧可以避免为每个列表单独指定图片路径的繁琐过程。

总之,list-style-image 属性是一个非常方便的属性,它允许您使用自定义的图片作为列表项符号,以增加页面的视觉效果和吸引力。

相关词 list