Как добавить другое фоновое изображение в существующий фон в css

Современные браузеры позволяют добавлять в элемент несколько элементов, разделенных запятыми. Например, я могу определить 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, чтобы добавить второй, без полной копии первого в нем?

Ответы

Ответ 1

@Jason

Этот код не будет работать. Вы должны использовать это

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

Ответ 2

Вы можете сделать это с помощью псевдоэлемента, например, после или до и добавления обертки к элементу.

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

Ответ 3

Я знаю, что вы не хотите полностью копировать что-либо, но я бы сделал что-то вроде этого

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

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

где второй класс в основном "перезаписывает" первый класс.

Другой вариант - использовать динамический язык стилей, например LESS (http://lesscss.org/), где вы можете использовать переменные.

В LESS вы можете сделать что-то вроде этого

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

.one{ 
    @twoBackgrounds;
    }

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