CSS - La herencia de las imágenes de fondo en capas

Question

CSS3 soporta múltiples imágenes de fondo, por ejemplo:

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

me gustaría ser capaz de añadir una imagen secundaria a un elemento con una clase sin embargo.

Por ejemplo, supongamos que tiene un menú de navegación. Y cada elemento tiene una imagen de fondo. Cuando se selecciona un elemento de navegación, desea colocar una capa en otra imagen de fondo.

No veo una manera de "agregar" una imagen de fondo en lugar de volver a definir toda la propiedad de fondo. Esto es un dolor porque para hacer esto con múltiples fondos, tendría que escribir la imagen de bg base una y otra vez para cada elemento si los elementos tienen imágenes únicas.

Idealmente me gustaría ser capaz de hacer algo como esto:

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

y tienen li.selected del resultado final aparece el mismo si lo hiciera:

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

Actualización: También probé el siguiente sin suerte (creo fondos no se heredan ..)

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

Answer 1

no creo que esto es posible, me Thi nk tendrías que redefinir toda la regla cada vez.

Por ejemplo, podría simplemente agregar un "envoltorio" alrededor de cada elemento que tiene el fondo inicial, con el elemento real que tiene un fondo transparente. A continuación, agregue el fondo en el elemento en sí cuando se selecciona.

Answer 2

Eso es, en cualquier caso, no es la forma en que funciona la herencia CSS. inherit implica que un elemento debe asumir los atributos de su elemento principal, no declaraciones anteriores que afectan al mismo elemento.

Lo que desea ha sido propuesto como una forma de hacer CSS más orientado a objetos, pero lo más cerca que obtendrá es con un pre-procesador como SASS.

Por ahora, en realidad solo tiene que volver a establecer la primera imagen junto con la segunda.