css - 具有多个图像的多个类

Question

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

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

Answer 1

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

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

Answer 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;
}