0

我正在尝试将两个类添加到一个元素，两个不同的背景图像位于其不同的空间。但是当我应用另一个类时，它会覆盖第一类背景图像。见下文

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

有什么办法可以做到这一点？

4

4 回答 4

2

如果您可以控制标记，则可以使用如下嵌套元素。

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>
于 2012-08-21T08:57:56.780 回答
2

我可以想到两种方法。

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

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

演示

在这两种情况下，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;
}
于 2012-08-21T09:26:32.340 回答
0

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

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

于 2012-08-21T08:58:48.383 回答
0

如果通过“合并”，你的意思是你想<li class="first second">同时应用两个背景图像，你可以使用 CSS 3 背景图像来实现这一点。我发现CSS3 Info 上的这个页面是使用它的一个非常好的资源。

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

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

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

.someElement {
  background: url(x.png) 0 0 repeat-x, url(y.png) 10 10 no-repeat;
}
于 2012-08-21T08:59:19.627 回答