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

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

html css

Html 合并一个元素的两个类背景图像,html,css,background,Html,Css,Background,我试图将两个类添加到一个元素中，并在其不同的空间中放置两个不同的背景图像。但当我应用另一个类时，它将覆盖第一个类的背景图像。见下文 <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.first{background:url（i

我试图将两个类添加到一个元素中，并在其不同的空间中放置两个不同的背景图像。但当我应用另一个类时，它将覆盖第一个类的背景图像。见下文

<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.first{background:url（images/first.png）无重复中心顶部}
li.second{background:url（images/second.png）无重复右中}

所以我想在li元素上应用这两个类时合并这两个背景

<li class="first second">

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

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

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>

li{background:url（images/first.png）无重复中心顶部}
li span{background:url（images/second.png）无重复右中；宽度：100%；高度：100%；}

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

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>

li{background:url（images/first.png）无重复中心顶部}
li span{background:url（images/second.png）无重复右中；宽度：100%；高度：100%；}

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

您应该使用CSS3多个背景图像来实现以下效果：

li.multi-bg{
    background-image: url(images/first.png), url(images/second.png);
    background-position: center bottom, left top;
    background-repeat: no-repeat;


}

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

您应该使用CSS3多个背景图像来实现以下效果：

li.multi-bg{
    background-image: url(images/first.png), url(images/second.png);
    background-position: center bottom, left top;
    background-repeat: no-repeat;


}

如果“合并”是指希望应用两个背景图像，则可以使用CSS 3背景图像来实现这一点。我发现这是一个非常好的资源来使用它

请注意，与更新的CSS功能一样，浏览器支持并没有那么广泛。上面的页面列出了浏览器支持，如下所示：

Firefox从版本3.6（Gecko 1.9.2）开始支持多种背景，从版本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;
}

如果“合并”，您的意思是希望应用两个背景图像，您可以使用CSS 3背景图像来实现这一点。我发现这是一个非常好的资源来使用它

请注意，与更新的CSS功能一样，浏览器支持并没有那么广泛。上面的页面列出了浏览器支持，如下所示：

BG映像的基本实现方式很简单：

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

我可以想出两种方法

您可以不将第二个背景添加到元素本身，而是添加到绝对定位的伪元素，以使其完全覆盖

li

。但是，如果您希望对三个以上的类和背景执行此操作，则此方法不起作用，因为您只能有两个伪元素（

：before

和

：after

）

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

在这两种情况下，HTML都类似于：

<li class="first second"></li>

。。。在第二种情况下：

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