使用CSS來使上述背景色的背景圖像列表中的

這是代碼使用CSS來使上述背景色的背景圖像列表中的

<ul> 
    <li class="test"> 
     <a href="#"> 
      <h2>Blah</h2> 
      <p>Blah Blah Blah</p> 
     </a> 
    </li> 
</ul>

基本上，我的名單已經有一些風格，比如我設置背景色爲它。

現在在「測試」類中，我還設置了背景圖片。

我的問題是我想讓背景圖像保持在背景顏色之上，我不知道如何實現這一點。我嘗試使用z-index，但我認爲它不適用於背景圖像。

請看一看圖像

Output

編輯：這是CSS代碼

例如，這是我的名單

#sidebar ul li{ 
    background:#ccf; 
}

而這個造型是班級考試的造型

.test{ 
    background-image: url('img/big_tick.png'); 
    background-repeat:no-repeat; 
    background-position: bottom right; 
    -moz-background-size: 30%; 
    -webkit-background-size: 30%; 
    background-size: 30%;  
    margin-right: 30px; 
}

來源

2011-12-13 user826224

這裏是他建立了一個的jsfiddle： http://jsfiddle.net/LHmfT/ – piebie

將!important屬性添加到您的background-image。就像這樣：

.test a{ 
background-image: url('img/big_tick.png') !important; 
background-repeat:no-repeat; 
background-position: bottom right; 
-moz-background-size: 30%; 
-webkit-background-size: 30%; 
background-size: 30%;  
margin-right: 30px;

}

我有一個例子小提琴here

編輯：我改變了類.test a，以反映實際的造型方案

來源

2011-12-13 16:10:10 piebie

我試圖把！重要的，但它仍然留在背景顏色。 @alpa我試圖改變背景爲背景顏色，但它仍然無法正常工作。有關清單，我遵循本教程從Nettuts [鏈接] http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy- steps-with-css3-and-html5/ 你可以看看鏈接，瞭解更多關於列表的CSS 謝謝你幫助我！ – user826224

你使用什麼瀏覽器？ '！important'標誌在Chrome和IE瀏覽器都可以在這裏使用。如果您爲列表發佈更多樣式，那可能會有所幫助。 – piebie

嗨，我在FF 8.0和Chrome 16上測試這個，我仍然面臨這個問題。該列表的樣式在鏈接http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and -html5 /。謝謝你的幫助:) – user826224

嘗試：將特異性的。測試類：#sidebar ul li.test

或者，更好的是，如果可能的話，加background-color的。測試類，並獲得完全擺脫元素選擇的。

我會避免使用！重要的，除非你絕對需要它。從長遠來看，使用它會使編輯你的CSS很痛苦。我建議不要使用！important，我建議瞭解特異性：http://reference.sitepoint.com/css/inheritancecascade

來源

2011-12-13 15:58:42 shaunsantacruz

這只是改變了背景圖像的位置，但並沒有讓它保持在背景顏色的上方 – user826224

嘗試：爲測試類添加特殊性：#sidebar ul li.test或者，更好的是，如果可能的話，給測試類添加背景色，並且完全取得元素選擇器的紅色。 – shaunsantacruz

使用CSS來使上述背景色的背景圖像列表中的

回答

相關問題