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

votos
11

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.

Así, por ejemplo, supongamos que tiene un menú de navegación. Y cada artículo tiene una imagen de fondo. Cuando se selecciona un elemento de navegación quieres otra imagen de fondo a la capa sucesivamente.

No veo la manera de una imagen de fondo 'añadir' en lugar de redeclarandolos toda la propiedad de fondo. Este es un dolor, porque a fin de hacer esto con múltiples orígenes, que tendría que escribir la imagen bg base de una y otra para cada elemento si los artículos 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 han de li.selected 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); }
Publicado el 02/04/2010 a las 00:20
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
3

No creo que esto es posible, creo que tendría que redefinir toda la regla cada vez.

Por ejemplo, usted podría añadir un "envoltorio" alrededor de cada elemento que tiene el fondo inicial, con el elemento real de tener un fondo transparente. A continuación, añadir el fondo en el objeto mismo cuando está seleccionado.

Respondida el 02/04/2010 a las 00:26
fuente por usuario

votos
4

Es decir, en cualquier caso, no es la forma en que funciona la herencia CSS. inheritimplica que un elemento debe asumir los atributos de su elemento padre, no declaraciones anteriores que afectan al mismo elemento.

Lo que se quiere se ha propuesto como una manera de hacer CSS más orientado a objetos, pero el más cercano que se obtiene es con un pre-procesador como SASS.

Por ahora en realidad sólo tiene que volver a exponer la primera imagen, junto con la segunda.

Respondida el 04/04/2010 a las 01:05
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more