0

異なるスペースに配置された2つの異なる背景画像を使用して、1つの要素に2つのクラスを追加しようとしています。しかし、別のクラスを適用すると、ファーストクラスの背景画像が上書きされます。下記参照

<li class="first">

li.first {background:url(images/first.png)no-repeat center top}
li.second{background:url(images/second.png)no-repeat right center}

だから私はli要素に両方のクラスを適用するときに両方の背景をマージしたい

<li class="first second">

これを達成する方法はありますか？

4

4 に答える 4

2

2つの方法が考えられます。

2 番目の背景を要素自体ではなく、完全に覆うように絶対配置された疑似要素に追加できますli。ただし、3 つ以上のクラスと背景に対してこれを実行したい場合は、2 つの疑似要素 (:beforeと:after) しか持てないため、この方法は機能しません。

または、最初の背景を 2 番目のクラスに追加することもできます。

デモ

どちらの場合も、HTML は次のようになります。

<li class="first second"></li>

最初のケースに関連する CSS:

li { 
    background-repeat: no-repeat;
    background-size: 50%;
}
.first {
    background-image: linear-gradient(rgba(102,37,93,.95) 50%, transparent 50%);
    background-position: 50% 0;
}
.second {
    position: relative;
}
.second:after {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-image: radial-gradient(rgba(255,255,255,.2), rgba(255,0,0,.9));
    background-position: 100% 50%;
    background-repeat: no-repeat;
    background-size: 50%;
    content: '';
}

...そして2番目のケースでは:

li { 
    background-repeat: no-repeat;
    background-size: 50%;
}
.first {
    background-image: linear-gradient(rgba(102,37,93,.95) 50%, transparent 50%);
    background-position: 50% 0;
}
.second {
    background-image: radial-gradient(rgba(255,255,255,.2), rgba(255,0,0,.9)), 
        linear-gradient(rgba(102,37,93,.95) 50%, transparent 50%);
    background-position: 100% 50%, 50% 0;
}
于 2012-08-21T09:26:32.340 に答える
2

マークアップを制御できる場合は、次のようにネストされた要素を使用できます。

li {background:url(images/first.png)no-repeat center top}
li span {background:url(images/second.png)no-repeat right center; width: 100%; height: 100%;}

<li><span></span></li>
于 2012-08-21T08:57:56.780 に答える
0

同じ要素に 2 つのクラスがある場合、2 番目のクラスが常に優先され、最初のクラスがオーバーライドされます。

効果を得るには、CSS3 の複数の背景画像を使用する必要があります。

li.multi-bg{
    background-image: url(images/first.png), url(images/second.png);
    background-position: center bottom, left top;
    background-repeat: no-repeat;


}

http://www.css3.info/preview/multiple-backgrounds/

于 2012-08-21T08:58:48.383 に答える
0

「マージ」によって両方の<li class="first second">背景画像を適用したい場合は、CSS 3 背景画像を使用してこれを実現できます。CSS3 Info のこのページは、それを使用するための非常に優れたリソースです。

新しい CSS 機能の場合と同様に、ブラウザのサポートはそれほど普及していないことに注意してください。上記のページには、ブラウザのサポートが次のようにリストされています。

Firefox はバージョン 3.6 (Gecko 1.9.2) 以降、Safari はバージョン 1.3 以降、Chrome はバージョン 10 以降、Opera はバージョン 10.50 (Presto 2.5) 以降、Internet Explorer はバージョン 9.0 以降で複数の背景をサポートしています。

BG 画像の基本的な実装は次のとおりです。

.someElement {
  background: url(x.png) 0 0 repeat-x, url(y.png) 10 10 no-repeat;
}
于 2012-08-21T08:59:19.627 に答える