Question

我已经定义了这个添加渐变背景颜色的类：

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

如果我将这两个类添加到一个元素中，它似乎会覆盖另一个

<h2 class="banner alertBell"></h2>

有没有办法让我有背景颜色和背景图像？

Answer 1

你可以使用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;
}

example jsfiddle

另见：How do I combine a background-image and CSS3 gradient on the same element?

Answer 2

Background css属性实际上是background-color，background-image，background-repeat，background-attachment和background-position组合成一个属性。因此，当您将H2的类属性设置为class="banner alertBell"时，alertBell类将覆盖横幅类中包含的任何共享属性。

您可以尝试将横幅类更改为：

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

Answer 3

您可以执行以下操作：

<div class="banner">
  <h2 class="alertBell"></h2>
</div>

Answer 4

您遇到了这个问题，因为CSS渐变定义为background-image，而不是background-color。

因此，根据CSS中稍后定义的内容，background-image将为.banner或.alertBell

背景渐变颜色和背景图像

4 个答案: