CSS - list-style-image 属性

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

语法

list-style-image: none | url | initial | inherit;

属性值

值	描述
none	不使用图像作为标记，而是使用定义的标记类型。如果未定义，则将使用默认的“disc”类型。默认值。
url	它指定用作列表项标记的图像路径。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

CSS 列表样式图像属性示例

以下示例说明了使用不同值的list-style-image 属性。

使用 none 值的列表样式图像属性

为了不使用任何图像作为标记，我们使用none 值。将使用默认的“disc”标记作为标记，或者使用list-style-type 定义的任何标记。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 22px;
         font-weight: bold;
      }

      .unordered1 {
         color: red;
         list-style-image: none;
      }

      .unordered2 {
         color: green;
         list-style-image: none;
         list-style-type: square;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-image property
   </h2>
   <h4>
      list-style-image: none
   </h4>
   <p>
      In this case, the default "disc" marker
      is used as list-style-type property is 
      not defined.
   </p>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
   <p>
      In this case, the square marker is used 
      as list-style-type property is defined 
      as "square".
   </p>
   <ul class="unordered2">
      <li>
         Potato
      </li>
      <li>
         Onion
      </li>
      <li>
         Cabbage
      </li>
      <li>
         Tomato
      </li>
   </ul>
</body>

</html>

使用图像 URL 的列表样式图像属性

要将图像用作列表项的标记，我们将图像 url 指定给list-style-image 属性。指定的图像将用作列表项的标记。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 22px;
         font-weight: bold;
      }

      .unordered1 {
         color: red;
         list-style-image: url("/css/images/cursor-zoom-out.png");
         list-style-type: circle;
      }

      .unordered2 {
         color: green;
         list-style-image: url("/css/images/cursor-e-resize.png");
         list-style-type: square;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-image property
   </h2>
   <h4>
      list-style-image: url ()
   </h4>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
   <h4>
      list-style-image: url ()
   </h4>
   <ul class="unordered2">
      <li>
         Potato
      </li>
      <li>
         Onion
      </li>
      <li>
         Cabbage
      </li>
      <li>
         Tomato
      </li>
   </ul>
   <p>
      Note: list-style-type is also defined 
      in case the image cannot be used.
   </p>
</body>

</html>

使用线性渐变的列表样式图像属性

除了图像之外，我们还可以使用线性渐变作为列表项的标记。指定的颜色组合将用作列表项的标记。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 30px;
         font-weight: bold;
      }

      .unordered1 {
         color: red;
         list-style-image: 
         linear-gradient(to right, red, orange, yellow, green);
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-image property
   </h2>
   <h4>
      list-style-image: 
      linear-gradient(to right, red, orange, yellow, green)
   </h4>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

支持的浏览器

属性
list-style-image	1.0	4.0	1.0	1.0	7.0

css_properties_reference.htm

打印页面