html - 如何添加带有伪之前的背景图像

Question

我正在尝试将一张图片用于列表，每个 li 将显示不同的背景位置，但我什至无法显示图片。

#info li a:before {
background-image: url(img/about/Capture.png) no-repeat;
}

#info li:nth-child(1){
background-size:auto ;
background-position: 0% -6.9%;
}

#info li:nth-child(2){
background-size:auto ;
background-position: 0% 37%;
}

#info li:nth-child(3){
background-size:auto ;
background-position: 0% 73.4%;
}

#info li:nth-child(4){
background-size:auto ;
background-position: 0% 111%;
}

----编辑----我刚刚意识到我实际上不需要任何伪 :P 大声笑我可以那样做 :

#info li{
background: url("img/about/Capture.png") no-repeat ;
background-size:auto ;
}

#info li:nth-child(1){
background-position: 0 -6.9%;
}

#info li:nth-child(2){
background-position: 0 37%;
}

#info li:nth-child(3){
background-position: 0 73.4%;
}

#info li:nth-child(4){
background-position: 0 111%;
}

Answer 1

你的语法是错误的，它应该是这样的。

#info li a:before {
    content: "";
    background: url(img/about/Capture.png) no-repeat;
}

在伪元素上，您需要设置 content: "" 属性才能使它们正常工作。

使用background-image:时不能设置no-repeat，需要background:。

您可能还需要宽度/高度以使图像可见。

编辑 1，根据您的评论:这是您可以执行的 2 个示例。

a.link1:before {
  content: url(http://placehold.it/40x40);
}

a.link2 {
  position: relative;
}

a.link2:before {
  content: "";
  background: url(http://placehold.it/100x40) no-repeat;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1
}

<a class="link1" href="#">This is a link 1</a><br><br>
<a class="link2" href="#">This is a link 2</a>

编辑 2，在您的帖子编辑中:是的，您当然可以在 li 元素上设置背景图片。