如何添加背景图像与伪

Question

我试图使用一个图像的列表和每个李将显示不同的背景位置，但我甚至无法获取图像显示。

#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元素上设置的背景图像。