Come posso sostituire solo la seconda immagine in una dichiarazione con più immagini di sfondo?

Question

Come posso utilizzare la cascata per sovrascrivere solo la seconda immagine in una dichiarazione di più immagini di sfondo?

Ho specificato uno stile standard per li s, con due immagini di sfondo (il gattino e il pesce sul lato destro). Ho anche specificato uno stile per li.secondary dove voglio cambiare solo la seconda delle due immagini di sfondo:

li { 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAeCAYAAAA/xX6fAAAA/ElEQVR42q2WYQ3DIBSE5wAJk1AJSKiESpiESakEJCChEpAwCW/vJSw0LPQoHMn3A0q5R7leeIjIFNo2JSm+Zz5DSAy6oLan8lKiIjV5fGu8u+TnrkfIKftpUQGks3Au8qNE6yOx1Sb/xPJYyH3EURW4QsHGZ5NB3K0dDpDwDvEZysAZvvP4znVpwTVcmrAgLsLX/yXhP+xfrOyuza00sbFZ7p5TAGlyYMF/J4axNClOvKKVJnEmTa6gpgkSM0Ca8HdITxOiSwuzLjVoAUAUxIWQBXESMQTpSWQd4r0GuxiJsZPII0F6EnUZg5hES7dZWEkExPj3GiDCv9d8AVEGli2R88rKAAAAAElFTkSuQmCC) repeat-y 90% center, 
    #CCC url("http://placekitten.com/275/300") repeat right center; 
    margin: 1em; 
    padding: 1em; 
    color: #FFF; 
    font-weight: bold; 
} 

li.secondary { 
    background: #CCC url("http://placekitten.com/325/300") repeat left 10%; 
} 

JSFiddle: http://jsfiddle.net/KatieK/9zcnp/1/

Ma la nuova dichiarazione per background: colpi la prima immagine di sfondo fuori (il pesce). Come posso indirizzare solo la seconda immagine di sfondo in una regola a cascata?

Answer 1

Purtroppo, il modo in cui le opere a cascata rende impossibile sovrascrivere i singoli livelli di sfondo senza ripetere il resto dei livelli in ciascuna dichiarazione.

In generale, le cascade opere su una base per-dichiarazione, in cui ogni declaration composto da esattamente una proprietà e un valore:

/* Declaration */ 
property: value; 

Un elenco separato da virgole di livelli di sfondo conta come un singolo valore per gli scopi della cascata, motivo per cui la seconda dichiarazione background sostituisce completamente la prima.

Mentre background è una scorciatoia per diverse altre proprietà, non è una scorciatoia per sfondo singoli livelli, in quanto non hanno le proprie proprietà. Poiché le proprietà dei singoli layer non esistono, non è possibile utilizzare la cascata per sovrascrivere solo determinati livelli mantenendo il resto.

Questo è anche il motivo per cui i gradienti prefissati in sfondi stratificati sono così prolissi e ripetitivi. Tristemente per noi, questa è una limitazione della sintassi CSS, quindi non si può fare molto per migliorare o aggirarlo usando solo il CSS.

---

_{Questo è simile al motivo per cui una dichiarazione stenografia come background: #ccc cancellerà un'immagine che è stato precedentemente dichiarato utilizzando background-image (esempi 1 e 2).}

_{Una notevole eccezione a questo è background-color, perché per ogni scatola c'è solo un colore di sfondo, che è sempre dipinto nel livello più basso sotto l'immagine di quel livello. È possibile impostare background-color su un singolo valore alla volta in qualsiasi punto di una regola e non interesserà altri livelli.}

Answer 2

Ovviamente non c'è cosa simile, sfondi multipli vengono impostate utilizzando background-image proprietà che non ha discendenti come background-image-1 ecc

Tuttavia, è possibile ignorare utilizzando un po 'di Javascript

Answer 3

L'ho risolto con a: prima dello pseudo-elemento.

http://codepen.io/lajlev/pen/DAyhn

.tile { 
    position:relative; 
    display: block; 
    float: left; 
    width: 100px; 
    height: 100px; 
    margin: 30px; 
    background: url('http://www.schaik.com/pngsuite/tbbn3p08.png') no-repeat; 

    &:before { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-color: red; 
    z-index: -1; 
    } 
} 

.tile.last:before { 
    background-color: green; 
}