CSS - Ereditando le immagini di sfondo a strati

Question

CSS3 supporta più le immagini di sfondo, ad esempio:

foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); } 

Mi piacerebbe essere in grado di aggiungere un'immagine secondaria ad un elemento con una classe però.

Ad esempio, supponiamo di disporre di un menu di navigazione. E ogni oggetto ha un'immagine di sfondo. Quando viene selezionato un elemento di navigazione, si desidera sovrapporre su un'altra immagine di sfondo.

Non vedo un modo per "aggiungere" un'immagine di sfondo invece di ridirezionare l'intera proprietà dello sfondo. Questo è un dolore perché per fare ciò con multi-sfondi, dovresti scrivere più e più volte l'immagine di base bg per ogni oggetto se gli elementi hanno immagini uniche.

Idealmente mi piacerebbe essere in grado di fare qualcosa del genere:

li { background: url(baseImage.jpg); } 
li.selected { background: url(selectedIndicator.jpg); } 

e hanno li.selected del risultato finale appare lo stesso se ho fatto:

li.selected { background: url(baseImage.jpg), url(selectedIndicator.jpg); } 

Aggiornamento: Ho provato anche il seguire senza fortuna (credo che gli sfondi non siano ereditati ..)

li { background: url(baseImage.jpg), none; } 
li.selected { background: inherit, url(selectedIndicator.jpg); } 

Answer 1

Non credo sia possibile, io Però dovresti ridefinire l'intera regola ogni volta.

Ad esempio, è possibile aggiungere un "wrapper" attorno a ogni elemento con lo sfondo iniziale, con l'elemento reale con uno sfondo trasparente. Quindi aggiungi lo sfondo sull'elemento stesso quando è selezionato.

Answer 2

In ogni caso, non è il modo in cui funziona l'ereditarietà CSS. inherit implica che un elemento debba assumere gli attributi del suo elemento padre, non le dichiarazioni precedenti che riguardano lo stesso elemento.

Quello che vuoi è stato proposto come un modo per rendere i CSS più orientati agli oggetti, ma il più vicino si ottiene con un pre-processore come SASS.

Per ora in realtà devi solo ripetere la prima immagine insieme al secondo.