CSS 如何将图像添加为列表项标记

CSS是层叠样式表的缩写，是一种简单易懂的语言，可以更轻松地呈现网页。使用CSS可以对网页应用样式。本文将介绍如何使用CSS将图像添加为列表中的列表项标记。

方法

我们将使用list-style-image属性来实现这个任务。list-style-image属性允许用户将图像设置为列表中的列表项标记。

语法

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

示例

步骤1 - 首先我们将定义HTML代码。

<!DOCTYPE html>
<html>
<head>
   <title>How to add an image as the list-item marker in a list using CSS?</title>
</head>
<body>
   <h4>How to add an image as the list-item marker in a list using CSS?</h4>
   <div>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </div>
</body>
</html>

步骤2 − 现在我们将添加 CSS 逻辑。

<style>
   ul{
      list-style-image: url("https://www.tutorialspoint.com/images/logo.png");
      padding-left: 350px;
   }
</style>

这里是完整的代码−

<!DOCTYPE html>
<html>
<head>
   <title>How to add an image as the list-item marker in a list using CSS?</title>
   <style>
      ul {
         list-style-image: url("https://www.tutorialspoint.com/images/logo.png");
         padding-left: 350px;
      }
   </style>
</head>
<body>
   <h4>How to add an image as the list-item marker in a list using CSS?</h4>
   <div>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </div>
</body>
</html>