具有多个图像的多个类答案

【问题标题】：Multiple classes with multiple images具有多个图像的多个类
【发布时间】：2012-11-10 01:15:34
【问题描述】：

我正在尝试做这样的事情：

.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？

【问题讨论】：

根据您需要支持的 IE 版本，您可以使用 :before 和 :after 伪元素为单个元素添加额外的背景（在 IE7 上不确定支持，但在 IE8+ 中有效）

标签： css image class background background-image

【解决方案1】：

最新加载的样式将覆盖以前加载的样式。所以在你的情况下。在您的实现中，.box 中的任何样式都将被样式 .shadow_1 覆盖。

你的假设是正确的，你需要另一个 div 来处理这个问题。

【讨论】：

好的，感谢您的回复 ;) 可能我不得不考虑两个 div 因为强大的 IE 但我想知道这是否可能;)

【解决方案2】：

我假设您希望在同一个元素上拥有多个背景图像。它在所有最新的浏览器版本中都是可能的并且受支持，但如果您想支持 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;
}

【讨论】：

是的，我知道，但是我希望能够做几个阴影类并将它们添加到不同的盒子，所以硬编码多个背景对我来说不是解决方案；）谢谢；）