Múltiples antecedentes en css3. Varios fondos con CSS o varios fondos

.

En CSS 2, agregar dos fondos a un elemento al mismo tiempo no es realista, por lo que debe anidar un elemento dentro del otro y establecer su propia imagen de fondo para cada uno. Para diseños complejos, estos archivos adjuntos a veces se pueden contar alrededor de una docena. Está claro que tal montón no conduce a nada bueno, pero ¿qué hacer? ¡Resulta que hay algo! En CSS 3, puede agregar varias imágenes de fondo a cualquier elemento al mismo tiempo. Entonces tomamos un dibujo de bloque (Fig. 1), lo cortamos en pedazos y comenzamos a probar en los navegadores.

Arroz. 1. Bloquear para el sitio

Por simplicidad, el ancho del bloque será de un tamaño fijo y la altura se estirará según el contenido. La figura muestra claramente las partes superior e inferior, la recorto en el editor y la doblo en capas en un archivo separado. La parte media debe elegirse para que se repita verticalmente sin costuras. El dibujo tiene un patrón repetitivo bien definido, por lo que no debería haber dificultades con la selección. Copie y pegue en los fragmentos anteriores. Como resultado, obtendrá esa imagen (Fig. 2).

Arroz. 2. Imágenes preparadas

En principio, puede guardar cada fragmento como un archivo separado, pero los sprites CSS (este es el nombre de la tecnología para pegar varias imágenes en una) tienen una serie de ventajas. En primer lugar, el número de solicitudes al servidor se reduce debido a la reducción en el número de archivos y, en segundo lugar, las cifras en total se cargan y muestran más rápido.

El fondo en sí se muestra mediante la propiedad de fondo, también establece las coordenadas del fragmento deseado. Los parámetros de cada fondo se enumeran separados por comas y, en este caso, su orden es importante. Quiero que la parte superior e inferior del bloque no se superpongan, así que los coloco primero (ejemplo 1).

Ejemplo 1. Varias imágenes de fondo

HTML5 CSS2.1 CSS3 IE 8 IE 9 Cr Op Sa Fx

El primer fondo dibuja el borde superior del cuadro, el segundo fondo dibuja la parte inferior y el tercero los bordes verticales.

Comprobando navegadores. Internet Explorer 8 no mostró ninguna imagen, otros navegadores (IE 9, Opera 10.60, Firefox 3.6, Chrome 5, Safari 5) mostraron el marco correctamente (Fig. 3).

Arroz. 3. Vista del marco en el navegador Safari

El uso de varios fondos facilita mucho la situación a los desarrolladores, especialmente cuando se trata de bloques de diseño. Solo queda una cosita. El navegador IE 6-8 debe dejar de existir.

). Hoy hablaremos un poco sobre otra característica interesante: el uso de múltiples imágenes en segundo plano.

Composición de fondos

Son muchas las razones por las que, en general, es posible que deba componer varias imágenes en segundo plano, entre ellas las más importantes son:

• ahorrar tráfico en el tamaño de las imágenes si las imágenes individuales juntas pesan menos que la imagen con capas aplanadas, y
• la necesidad de un comportamiento independiente de capas individuales, por ejemplo, al implementar efectos de paralaje.

Puede haber otras razones razonables :)

Enfoque clásico

Entonces, necesitamos colocar varias imágenes de fondo una encima de la otra. ¿Cómo suele resolverse esta tarea? Es muy simple: se crea un bloque para cada imagen de fondo y se le asigna la imagen de fondo correspondiente. Los bloques se anidan entre sí o se colocan en una fila con las reglas de posicionamiento adecuadas. He aquí un ejemplo sencillo:

Bloque con la clase "pesca" dentro de "sirena" sólo con fines de demostración.

Ahora algunos estilos:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (altura: 300px; ancho: 480px; posición: relativa;) .sample1 .sea (fondo: url (media / sea.png) repeat-x arriba a la izquierda;) .sample1 .mermaid (background: url (media / mermaid.svg) repeat-x bottom left;) .sample1 .fish (background: url (media / fish.svg) no-repeat; height: 70px; width: 100px; left : 30px; arriba: 90px; posición: absoluta;) .sample1 .fishing (fondo: url (media / fishing.svg) no repetir 10px arriba a la derecha;)

Resultado:

En este ejemplo, hay tres fondos anidados y un bloque con peces, ubicados junto a los bloques "fondo". En teoría, los peces se pueden mover, por ejemplo, usando JavaScript o Transiciones / Animaciones CSS3.

Por cierto, este ejemplo utiliza la nueva sintaxis de posicionamiento en segundo plano para ".fishing", también definida en CSS3:
background: url (media / fishing.svg) no repetir arriba a la derecha 10px;
Actualmente se admite en IE9 + y Opera 11+, pero no en Firefox 10 y Chrome 16. Por lo tanto, los usuarios de las dos últimas navegaciones aún no podrán pescar.

Múltiples orígenes

Una nueva característica agregada en CSS3 viene al rescate: la capacidad de definir múltiples imágenes de fondo para un elemento a la vez. Se parece a esto:

Y los estilos correspondientes:
.sample2 .sea (altura: 300px; ancho: 480px; posición: relativa; imagen de fondo: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / sea. png "); background-position: 10px arriba a la derecha, abajo a la izquierda, arriba a la izquierda; background-repeat: no-repeat, repeat-x, repeat-x;) .sample2 .fish (background: url (" media / fish.svg ") sin repetición; altura: 70 px; ancho: 100 px; izquierda: 30 px; arriba: 90 px; posición: absoluta;)
Para definir varias imágenes, debe utilizar la regla de la imagen de fondo, que enumera las imágenes individuales separadas por comas. Se pueden usar reglas adicionales, también una lista, para establecer el posicionamiento, las repeticiones y otros parámetros para cada una de las imágenes. Tenga en cuenta el orden en el que se enumeran las imágenes: las capas se enumeran de izquierda a derecha, de arriba a abajo.

El resultado es exactamente el mismo:

Una regla

Si no es necesario seleccionar los peces en un bloque separado para manipulaciones posteriores, la imagen completa se puede reescribir con una simple regla:

Estilos:
.sample3 .sea (altura: 300px; ancho: 480px; posición: relativa; imagen de fondo: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / fish. svg "), url (" media / sea.png "); posición de fondo: arriba a la derecha 10px, abajo a la izquierda, 30px 90px, arriba a la izquierda; fondo-repetir: no-repetir, repetir-x;)

No daré una imagen con el resultado, créanme, coincide con las dos imágenes de arriba. Pero preste atención nuevamente a los estilos, especialmente a la "repetición de fondo": de acuerdo con la especificación, si falta parte de la lista al final, el navegador debe repetir la lista especificada tantas veces como sea necesario para que coincida con el número de imágenes en la lista.

En este caso, es equivalente a esta descripción:
repetición de fondo: no repetición, repetición x, no repetir, repetir x;

Aun mas corto

Si recuerda CSS 2.1, define la capacidad de describir imágenes de fondo de manera concisa. ¿Qué tal varias imágenes? También es posible:

Sample4 .sea (altura: 300 px; ancho: 480 px; posición: relativa; fondo: url ("media / fishing.svg") arriba a la derecha 10 px sin repetición, url ("media / mermaid.svg") abajo a la izquierda repetición-x , url ("media / fish.svg") 30px 90px sin repetición, url ("media / sea.png") repeat-x;)

Pero tenga en cuenta que ahora no puede simplemente omitir valores (a menos que coincidan con los predeterminados). Por cierto, si desea establecer el color de la imagen de fondo, debe hacerlo en la última capa.

Imágenes dinámicas

Si la composición es estática o dinámica no más que dependiendo del tamaño del contenedor, entonces los fondos múltiples obviamente simplifican el diseño de la página. Pero, ¿qué sucede si necesita trabajar con elementos individuales de la composición independientemente de javascript (mover, desplazarse, etc.)?

Por cierto, aquí hay un ejemplo de la vida real: un tema con un diente de león en Yandex:


Si profundiza en el código, verá algo como esto:

...

Los bloques con clases "b-fluff-bg", "b-fluff__cloud" y "b-fluff__item" contienen imágenes de fondo que se superponen entre sí. Además, el fondo con nubes se desplaza constantemente y los dientes de león vuelan por la pantalla.

¿Se puede reescribir esto usando múltiples fondos? En principio, sí, pero siempre 1) compatibilidad con esta función en los navegadores de destino y ... 2) sigue leyendo;)

¿Cómo agrego oradores a varios fondos? En tal situación, resulta conveniente que en la vista interna el navegador distribuya los parámetros individuales de la imagen de fondo de acuerdo con las reglas apropiadas. Por ejemplo, para el posicionamiento hay una "posición de fondo", y para las compensaciones, basta con cambiarla. Sin embargo, hay un cargo por usar varias imágenes: esta regla (y cualquier regla similar) debe enumerar la posición de todos los fondos configurados para su bloque, y no puede hacerlo de forma selectiva.

Para agregar animación a nuestro fondo con peces, puede usar el siguiente código:
$ (documento) .ready (function () (var sea = $ (". sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; función animationLoop () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480; mermaidX += 0.5; if(mermaidX >480) sirenaX = 0; fishY = -10 + (10 * Math.cos (t * 0.091)); pezX = 10 + (5 * Math.sin (t * 0.07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mermaidX + "px bottom," + fishesX + "px" + fishesY + "px, top left"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
dónde
window.requestAnimFrame = (function () (return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (función (devolución de llamada) (60);)); );

Y, por cierto, las animaciones también se pueden hacer a través de Transiciones / Animaciones CSS3, pero este es un tema para una discusión separada.

Paralaje e interactivo

Finalmente, con maniobras similares, puede agregar fácilmente los efectos de paralaje o interacción interactiva con el fondo:

Varias imágenes de fondo son útiles en tales escenarios, ya que si bien solo estamos hablando del fondo (y no del contenido), usarlas le permite evitar saturar su código html y el DOM. Pero tienes que pagar por todo: no puedo referirme a elementos individuales de la composición por nombre, id, clase o cualquier otro parámetro. Debo recordar claramente el orden de los elementos en la composición en el código, y para cada cambio de cualquier parámetro de cualquier elemento, de hecho, debo pegar la línea que describe los valores de este parámetro para todos los elementos y actualizarla para el composición completa.

Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mermaidX + "px bottom," + fishX + "px" + fishY + "px, top left";

Estoy seguro de que esto se puede envolver en un código JavaScript conveniente que se hará cargo de la virtualización de las relaciones con capas individuales, mientras deja el código html de la página lo más limpio posible.

¿Qué pasa con la compatibilidad?

Todas las versiones modernas de los navegadores populares, incluido IE9 +, admiten varias imágenes (puede comprobarlo, por ejemplo, con caniuse).

También puede utilizar Modernizr para proporcionar navegadores que no admiten múltiples fondos con soluciones alternativas. Como escribió Chris Coyier en su nota sobre el orden de las capas cuando usa múltiples fondos, haga algo como esto:

Multiplebgs body (/ * Increíbles declaraciones múltiples de BG que trascienden la realidad y las chicas sin recursos * /) .no-multiplebgs body (/ * laaaaaame fallback * /)
Si está confundido acerca del uso de JS para proporcionar compatibilidad con versiones anteriores, simplemente puede declarar el fondo dos veces, sin embargo, esto también tiene sus inconvenientes en la forma de una posible carga doble de recursos (esto depende de la implementación del procesamiento css en un navegador en particular):

/ * respaldo de bg múltiple * / background: # 000 url (...) ...; / * Impresionantes declaraciones múltiples de BG que trascienden la realidad y las chicas sin recursos * / url de fondo (...), url (...), url (...), # 000 url (...);

Si ya ha comenzado a pensar en Windows 8, tenga en cuenta que puede usar múltiples fondos al desarrollar aplicaciones de estilo metro, ya que el mismo motor se usa internamente como en IE10.

PD. Sobre el tema: no puedo evitar recordar el artículo fenomenal sobre

Tarea

Agregue dos imágenes de fondo para el bloque usando CSS3.

Solución

Los navegadores modernos le permiten agregar una cantidad arbitraria de imágenes de fondo a un elemento, enumerando las opciones para cada fondo, separadas por comas. Es suficiente usar el fondo de propiedad universal y especificar un fondo para él primero y el segundo separado por comas.

Como ejemplo, considere la posibilidad de crear líneas decorativas verticales a la izquierda y a la derecha de un bloque. Para hacer esto, primero prepare imágenes que deben repetirse verticalmente sin costuras. En la Fig. 1 muestra una imagen de fondo que se mostrará en el borde izquierdo, y en la fig. 2 imágenes para mostrar en el borde derecho.

Arroz. 1. Imagen de fondo del borde de la izquierda

Arroz. 2. Imagen de fondo del borde de la derecha

Como elemento de bloque al que se agrega un fondo, generalmente se usa la etiqueta