多班，多张图片

我试图做这样的事情：多班，多张图片

.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

多班，多张图片

回答

相关问题