html - 为一个元素合并两个类的背景图像

Question

我正在尝试向一个元素添加两个类，该元素在其不同空间中放置两个不同的背景图像。但是当我应用另一个类时，它会覆盖一流的背景图像。见下文

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

有什么办法可以实现吗？

Answer 1

我可以想到两种方法。

您可以不将第二个背景添加到元素本身，而是添加到绝对定位的伪元素，使其完全覆盖 li。但是，如果您希望对三个以上的类和背景执行此操作，则此方法不起作用，因为您只能有两个伪元素(:before 和 :after).

或者您也可以简单地将第一个背景添加到第二个类中。

DEMOS

在这两种情况下，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: '';
}

...在第二种情况下:

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