Come per aggiungere un altro background-image to background esistente in css

Question

Browser moderni permette di aggiungere più, sfondi separati da virgole per elemento. Per esempio posso definire 2 sfondi in questo modo:

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

E 'funziona meraviglioso, e tutti, ma c'è spesso una situazione poi voglio avere uno sfondo sempre applicato su elemento, e un altro solo allora aggiungo seconda classe o qualche modificatore. Ad esempio voglio seguente codice:

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

... per tornare elemento sia con sfondo applicata (codice di cui sopra restituisce solo secondo).

C'è un modo in css moderna per aggiungere secondo senza pienamente copiare il primo in esso?

Answer 1

so che non si desidera copiare completamente nulla, ma vorrei fare qualcosa di simile

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

in cui la seconda classe fondamentalmente "sovrascrive" la prima classe.

L'altra opzione è quella di utilizzare un linguaggio dinamico come foglio di stile MENO (http://lesscss.org/), in cui è possibile utilizzare le variabili.

in meno, si potrebbe fare qualcosa di simile

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

.one{ 
    @twoBackgrounds; 
    } 

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

Answer 2

@ Jason

Questo codice non funziona. Devi usare questo

.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

Si può fare questo con uno pseudo-elemento come dopo o prima e aggiungendo un involucro all'elemento.

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

Ecco la jsfiddle: http://jsfiddle.net/alexut/jz0pm47t/1/