背景グラデーションの色と背景画像

グラデーションの背景色を追加するこのクラスを定義しました:

.banner {
    background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D;
}

私はまた、背景画像を追加するクラスを定義しました

.alertBell {
    background-image: url("../images/icons/bell.png");
    background-position: 5px 50%;
    background-repeat: no-repeat;
    padding-left: 30px;
}

これらのクラスを両方の要素に追加すると、もう一方の要素を上書きするように見えます


私は背景色と背景画像を持つことができる方法はありますか?

1

4 答え

CSS3の複数の背景を使用することができます。

.banner.alertBell {
    background-color:#9FCC1D;
    background-image:url("../images/icons/bell.png"),
        -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%);
    background-repeat:no-repeat, repeat;
    background-position:5px 50%, 0 0;
}

jsfiddleの例

see also: How do I combine a background-image and CSS3 gradient on the same element?

2
追加された

次のようなことができます:

<div class="banner">
  

</div>
0
追加された
AFAIK、あなたはのようなインライン要素の中に

のようなブロック要素を入れ子にしてはなりません

追加された 著者 Dónal,

背景のCSSプロパティは、実際に背景色背景画像 code> background-attachment background-position を1つのプロパティに追加します。したがって、H2のクラスプロパティを class = "banner alertBell" に設定すると、alertBellクラスはバナークラスに含まれるすべての共有プロパティを上書きします。

バナークラスを次のように変更してみてください:

.banner {
    background-color: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D;
}
0
追加された

CSSグラデーションは background-color ではなく background-image として定義されているため、この問題が発生しています。

So depending on which one is defined later in the CSS, the background-image will be either .banner or .alertBell

0
追加された