CSS - list-style-image 属性

CSS list-style-image 属性用于将图像添加为列表项标记。

语法

CSS 属性 list-style-image 可以有不同的值。让我们检查所有可能的可用语法，为 list-style-image 设置一个值。

关键字值


list-style-image: none;

URL 值


list-style-image: url("<filename>");

有效图像值


list-style-image: linear-gradient(to left bottom, red, blue);

Global 值


list-style-image: inherit;
list-style-image: initial;
list-style-image: revert;
list-style-image: revert-layer;
list-style-image: unset;

可能的值

<image>：用作标记的图像。
none：不使用任何图像作为标记。如果 list-style-image 设置为 none，则将使用 list-style-type 设置的值。

适用于

列表项。<li> 和 <summary> 等元素，以及所有具有 display： list-item 的元素。

DOM 语法


object.style.listStyleImage = url('<filename>')

CSS list-style-image - 基本示例

以下是 list-style-image CSS 属性的示例，其中包含有序列表和无序列表的有效 URL：


<html>
<head>
<style>
	 .type-url-unordered {
	 	 	 list-style-image: url('images/smiley.png');
	 }

	 .type-url-ordered {
	 	 	 list-style-image: url('images/smiley.png');
	}
</style>
</head>
<body>
	 <h2>Example - list-style-image</h2>
	 <ul class="type-url-unordered"><u>List style image</u>
	 	 <li>First Item:
	 	 	 <ul>
	 	 	 	 <li>Sub-item 1</li>
	 	 	 	 <li>Sub-item 2</li>
	 	 	 </ul>
	 	 </li>
	 	 <li>Second Item</li>
	 	 <li>Third Item</li>
	 </ul>	

	 <ol class="type-url-ordered"><u>List style image</u>
	 	 	 <li>First Item</li>
	 	 	 <li>Second Item</li>
	 	 	 <li>Third Item</li>
	 	</ol>
</body>
</html>

CSS list-style-image - 使用 linear-gradient（）

下面是一个 list-style-image CSS 属性的示例，其中传递给了它 linear-gradient（）值：


<html>
<head>
<style>
	 	.type-gradient {
	 	 	 list-style-image: linear-gradient(to left bottom, red, orange, yellow, lightyellow, blue, magenta, purple);
	 	}
	 	</style>
</head>
<body>
	 	<h2>list-style-image: linear-gradient()</h2>
	 	<ul class="type-gradient"><u>List style image</u>
	 	 	 <li>First Item:
	 	 	 	 	<ul>
	 	 	 	 	 	 <li>Sub-item 1</li>
	 	 	 	 	 	 <li>Sub-item 2</li>
	 	 	 	 	</ul>
	 	 	 </li>
	 	 	 <li>Second Item</li>
	 	 	 <li>Third Item</li>
	 	</ul>	
</body>
</html>

CSS list-style-image - 使用“none”

以下是 list-style-image： none CSS 属性的示例：


<html>
<head>
<style>
	 	.type-image-none {
	 	 	 list-style-image: none;
	 	}
	 	</style>
</head>
<body>
	 	<h2>list-style-image: none</h2>
	 	<ul class="type-image-none"><u>List style image - none</u>
	 	 	 <li>First Item:
	 	 	 	 	<ul>
	 	 	 	 	 	 <li>Sub-item 1</li>
	 	 	 	 	 	 <li>Sub-item 2</li>
	 	 	 	 	</ul>
	 	 	 </li>
	 	 	 <li>Second Item</li>
	 	 	 <li>Third Item</li>
	 	</ul>	
</body>
</html>

打印本页