html - 背景渐变颜色和背景图像

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?