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

具有多个图像的多个类

2 个答案: