CSS list-style-image 属性

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