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

Answer 2

我可以想到两种方式。

您可以将第二个背景添加到元素本身，但添加到绝对定位的伪元素，使其完全覆盖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;
}

Answer 3

如果在同一个元素上有两个类，则第二个类总是具有更高的优先级并覆盖第一个。

您应该使用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/

Answer 4

如果通过“合并”，表示您希望<li class="first second">同时应用两个背景图片，则可以使用CSS 3背景图片来实现此目的。我发现this page on CSS3 Info是使用它的非常好的资源。

请注意，与新CSS功能一样，浏览器支持并不普及。上面的页面列出了浏览器支持：

自从版本3.6（Gecko 1.9.2）以来，Firefox支持多种背景，从版本1.3开始支持Safari，从版本10开始支持Chrome，从版本10.50开始支持Opera（Presto 2.5），从版本9.0开始支持Internet Explorer。

BG图像的基本实现很简单：

.someElement {
  background: url(x.png) 0 0 repeat-x, url(y.png) 10 10 no-repeat;
}

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

4 个答案: