多班，多張圖片

我試圖做這樣的事情：多班，多張圖片

.box { 
    background-image: url(../img/box.png); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    display: block; 
    height: 64px; 
    margin: 90px auto; 
    overflow: hidden; 
    width: 831px; 
} 

.shadow_1 { 
    background-image: url(../img/shadow_1.png); 
    background-position: 0 100%; 
    background-repeat: no-repeat; 
    padding-bottom: 31px; 
}

而在HTML：

<div class="box shadow_1"></div>

我想兩個類具有兩個不同的圖像結合，但第二類中的圖像會覆蓋第一個圖像。這是可能的，或者我必須使用兩個divs？

來源

2012-11-21 Lewiatan

根據您需要支持其IE的版本中，您可能能夠利用'的：before'和'：添加額外的背景，以一個單一的元素（after'僞元素不知道在IE7支持，但它的作品在IE8 +） – cimmanon

最新加載的樣式將覆蓋以前加載的樣式。所以在你的情況。在您的實施中，.box中的任何款式將被.shadow_1款式覆蓋。

你是對的，假設你需要另一個div來處理這個問題。

來源

2012-11-21 17:55:46 Khan

好的，感謝您的回覆;）顯然，我不得不考慮兩個div因爲強大的IE瀏覽器，但我想知道是否有可能;） – Lewiatan

我假設你想在同一個元素上有多個背景圖像。在所有最新的瀏覽器版本中都是可能的並且受到支持，但是如果你想支持IE8和更早版本，你必須使用多個div。

.box { 
    background-image: url(../img/box.png), url(../img/shadow_1.png); 
    background-position: 0 0, 0 100%; 
    background-repeat: no-repeat, no-repeat; 
    display: block; 
    height: 64px; 
    margin: 90px auto; 
    overflow: hidden; 
    width: 831px; 
    padding-bottom: 31px; 
}

來源

2012-11-21 18:07:00 igi33

是的，我知道，但我想能夠做幾個影子類並將它們添加到不同的框中，所以硬編碼的背景對我來說不是解決方案;）無論如何，謝謝;） – Lewiatan

多班，多張圖片

回答

相關問題