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

Question

Modern browsers allows to add multiple, comma-separated backgrounds to element. For example I can define 2 backgrounds like this:

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

It's works wonderfull, and all, but there is often a situation then I want to have one background always applied on element, and another only then I add second class or some modificator. For example I want following code:

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

...to return element with both background applied (code above will return only second).

Is there a way in modern css to add second one without fully copy the first one in it?

Answer 1

You can do this with an pseudo-element like after or before and adding a wrap to the element.

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

Here is the jsfiddle: http://jsfiddle.net/alexut/jz0pm47t/1/

Answer 2

@Jason

This code will not work. You have to use this

.one {
  background: url(image1.png) no-repeat left top;
}

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

Answer 3

I know you don't want to fully copy anything but I would do something like this

.one{ 
    background: url(image1.png) no-repeat left top; 
    }

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

where the second class basically "overwrites" the first class.

The other option is to use a dynamic stylesheet language like LESS ( http://lesscss.org/ ), where you can use variables.

In LESS, you could do something like this

@twoBackgrounds: url(image1.png) no-repeat left top;

.one{ 
    @twoBackgrounds;
    }

.two{
    @twoBackgrounds, 
    background: url(image2.png) no-repeat right bottom;
}