css为列表项li增加背景图像

将背景图像添加到列表项中，可以使网站的列表有更明显的视觉效果。为了为列表项增加背景图像，我们需要使用CSS的background-image属性。

li {
  background-image: url("image.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 10px;
}

上述代码首先为列表项的背景图像设置了一个URL，指向我们想要用作背景图像的图片。接着，我们使用background-size属性将图片的大小设置为cover，使它填充整个列表项的背景。我们还可以使用background-repeat属性来设置背景图像的重复方式，这里我们设置为不重复。最后，我们还为列表项添加了一个padding，以便在显示背景图像时，为列表项留出一些间距。

除了在CSS中设置列表项的背景图像，我们还可以使用伪元素:before或:after来添加列表项的背景。这种方法常用于在列表项前后添加符号或其他修饰。下面是一个例子：

li:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("symbol.png");
  background-repeat: no-repeat;
  margin-right: 10px;
}

上述代码使用:before伪元素在列表项前添加了一个背景图像。我们设置了:before的content属性为空字符串，这样它就不会显示任何文本。接着，我们使用display属性将它设置为inline-block，让它能与文本和其他元素排列。我们还设置了它的宽度和高度以及背景图像，来显示我们想要的符号。最后，我们使用margin-right属性来设置:before伪元素与列表项之间的间距。

在总结，要为列表项添加背景图像，我们可以直接在CSS中使用background-image属性，或者使用伪元素在列表项前后添加背景图像。这些方法能为网站列表增加更生动的视觉效果。