Cómo crear varios fondos imagen css3
Es posible combinar varias imágenes en una sola imagen cuando se trabaja con los navegadores CSS3 con capacidad. Al menos una de las imágenes debe tener zonas transparentes que permiten que la segunda imagen a asomarse desde detrás de ella. El siguiente procedimiento modifica el ejemplo SingleImage para contener dos imágenes. La segunda imagen se suministra con fuente descargable como PawPrint.jpg.
Sin embargo, se puede sustituir fácilmente una imagen de su gusto en su lugar (siempre y cuando la imagen tiene las regiones transparentes requeridas).
Abre el archivo SingleImage.CSS.
Modificar el estilo de la carrocería de modo que la propiedad background-imagen contiene ahora dos imágenes, como se muestra aquí.
body {background-image: url ("PawPrint.jpg"), URL ("CuteCat.jpg") -Antecedentes-color: Saddlebrown-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px Amarillo-}Observe que las dos entradas de imagen están separados por una coma - no muchas propiedades de entrada múltiple requieren comas, pero este es uno de ellos. El orden en el que aparecen las imágenes también es importante. La imagen contiene la transparencia debe aparecer en primer lugar porque aparece en la parte superior de la segunda imagen. Si invierte las entradas, la imagen que carecen de transparencias será en la parte superior y verá una sola imagen.
Guarde el archivo CSS como MulitpleImage.CSS.
Abra el archivo SingleImage.HTML.
Modificar el
Una imagen de fondo múltiple
Guarde el archivo HTML como MultipleImage.HTML.
Cargar la página MultipleImage.
Usted ve el fondo. Observe cómo las huellas de patas superponer la imagen original, pero no ocultan por completo.
