如何添加背景圖像與僞

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元素上設置的背景圖像。