css - 如何在 css 中将另一个背景图像添加到现有背景

Question

现代浏览器允许向元素添加多个以逗号分隔的背景。例如，我可以这样定义 2 个背景:

background: url(image1.png) no-repeat left top, url(image2.png) no-repeat right bottom;

它的效果非常好，但是经常有这样一种情况，我希望始终将一个背景应用到元素上，然后才添加另一个背景或一些修改器。例如我想要以下代码:

<style>
    .one { background: url(image1.png) no-repeat left top; }
    .two { background: url(image2.png) no-repeat right bottom;}
</style>

<div class="one two"></div>

...返回应用了两个背景的元素(上面的代码将只返回第二个)。

在现代 css 中有没有办法在不完全复制第一个的情况下添加第二个？

Answer 1

您可以使用类似 after 或 before 的伪元素并向该元素添加一个换行来完成此操作。

.wrap {
    width:500px;
    height: 500px;
    border:1px solid red;
    position:relative;
}
.one {  
    width:100%;height:100%;
    background-image: url(http://dummyimage.com/250x250/dfdbb9/dfdbb9.png);
    background-repeat:no-repeat;
    background-position:left top;
}
.two:after {    
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    z-index: -1;   
    background-image:  url(http://dummyimage.com/250x250/b9d9df/b9d9df.png);
    background-repeat:no-repeat;        
    background-position:right bottom;
}

<div class="wrap">
    <div class="one two"></div>
</div>

这是 jsfiddle:http://jsfiddle.net/alexut/jz0pm47t/1/