CSS - Dziedziczenie warstwowe obrazy tła

Question

CSS3 obsługi wielu obrazów tła, na przykład:

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

Chciałbym, aby móc dodać obraz wtórny do elementu z klasą chociaż.

Załóżmy na przykład, że masz menu nawigacji. I każdy element ma obraz tła. Po wybraniu elementu nawigacyjnego warstwa ma zostać nałożona na inny obraz tła.

Nie widzę sposobu, aby "dodać" obraz tła zamiast redeclaring całej właściwości tła. Jest to uciążliwe, ponieważ aby zrobić to za pomocą wielowarstwy, trzeba by napisać obraz bazowy bg za każdym razem, gdy elementy mają unikalne obrazy.

Idealnie byłbym w stanie zrobić coś takiego:

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

A czy li.selected na wynik końcowy wyglądają tak samo, gdybym to zrobił:

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

Update: Próbowałem również podążanie bez powodzenia (uważam, że tła nie są dziedziczone).

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

Answer 1

Nie sądzę, że to możliwe, ja nk musisz za każdym razem ponownie zdefiniować całą regułę.

Na przykład można dodać "opakowanie" wokół każdego elementu, który ma początkowe tło, a rzeczywisty element ma przezroczyste tło. Następnie dodaj tło do samego elementu, gdy jest zaznaczone.

Answer 2

Tak czy inaczej nie jest tak, jak działa dziedziczenie CSS. inherit oznacza, że ​​element powinien przyjmować atrybuty jego elementu nadrzędnego, a nie wcześniejsze deklaracje mające wpływ na ten sam element.

Proponowany sposób, aby CSS był bardziej zorientowany obiektowo, ale najbardziej zbliżony jest do pre-procesora takiego jak SASS.

Na razie trzeba po prostu ponownie podać pierwszy obraz wraz z drugim.