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%;
}

---- ---- EDIT 我刚刚意识到我实际上并不需要任何伪：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: ""属性才能生效。

使用no-repeat时无法设置background-image:，您需要background:。

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

编辑1 ，对您的评论：以下是2个样本。

＆＃13;

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
}

＆＃13;

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

＆＃13;

在帖子编辑中

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

如何在之前添加伪背景图像

1 个答案: