4

私はこのようなことをしようとしています:

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

2 つのクラスを 2 つの異なる画像と組み合わせたいのですが、2 番目のクラスの画像で最初の画像をオーバーライドします。それは可能ですか、それとも 2 つ使用する必要がありますdivsか?

4

2 に答える 2

2

最後に読み込まれたスタイルは、以前に読み込まれたスタイルを上書きします。だからあなたの場合。のすべてのスタイルは、実装.boxのスタイルによって上書きさ.shadow_1れます。

これを処理するには別の div が必要であると仮定して、あなたは正しいです。

于 2012-11-21T17:55:46.353 に答える
0

同じ要素に複数の背景画像が必要だと思います。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-21T18:07:00.467 に答える