Cómo aplicar dos imágenes en el fondo de un sitio web con CSS
Con la transición a Windows 10 y la introducción del navegador Microsoft Edge, la popularidad de Internet Explorer comenzó a decaer. Mozilla Firefox y Google Chrome son navegadores mucho más avanzados y siguen el ritmo de la introducción de nuevos elementos en el campo CSS.
Por esta razón, basándome en mi experiencia personal, me resultó difícil usar i fondos múltiples o fondos múltiples. En la práctica, es posible asignar múltiples imágenes de fondo a cada elemento, obteniendo una imagen que consta de múltiples fondos. La propiedad de la imagen de fondo presentará las rutas de la imagen separadas por una coma. Todas las demás propiedades relativas al fondo: tamaño de fondo, adjunto de fondo, repetición de fondo, se pueden utilizar separándolas por el signo de coma y siempre con la misma lógica: la primera imagen representada, la de la izquierda, se refiere a la primer plano de imagen.
Cómo aplicar dos imágenes en el fondo de un sitio web con CSS
Lo que hice para aplicar dos imágenes en el fondo de mi sitio fue intervenir en el CSS insertando las siguientes líneas de código en el cuerpo:
cuerpo {color: # 333;
Al probar esta implementación en mi código de fondo múltiple CSS en Firefox, Chrome y Edge, el resultado fue excelente, pero el mayor problema fue con Internet Explorer, que aparentemente no admite múltiples fondos. Al configurar el archivo adjunto de fondo como fijo en una de las dos imágenes, Internet Explorer también lo aplica a la otra imagen, que en su lugar se establece en Local, en esto generó la ilegibilidad de los artículos.
Ahora, dado que los propietarios de Windows XP, Vista, Windows 7 y Windows 8.1 todavía usan mucho el navegador de Microsoft, pensé en encontrar una solución.
Lo que hice para que esto funcionara bien fue eliminar el fondo múltiple en el CSS para los usuarios que navegan con Internet Explorer. En la práctica, he desactivado el fondo múltiple en todas las versiones de Internet Explorer 6. 7, 8, 9, 10, 11 actuando solo en el archivo adjunto de fondo:
cuerpo {color: # 333;
/ * aplicado para problemas con IE11 y versiones anteriores * / Si también desea aplicarlo a Microsoft Edge, simplemente agregue estas líneas de código en su CSS: @supports (-ms-accelerator: true) { Esta primera solución consiste en declarar reglas CSS que solo Internet Explorer puede leer. Por ejemplo un asterisco antes de la propiedad CSS. * Fondo: verde; / * IE 7 y posterior * / _fondo: azul; / * IE 6 * / Recuerde que si desea actuar en su lugar en el archivo HTML dentro del HEAD, tiene otras soluciones.[if IE 8]El comentario condicional de IE es probablemente el más utilizado para corregir errores de IE para versiones específicas (IE6, IE7, IE8). A continuación, se muestran algunos ejemplos de código para asignar estilos a diferentes versiones de Internet Explorer:
->[if lt IE 7 ]Otra solución es agregar una clase CSS que haga referencia a la versión de IE. Para especificar la versión de IE, use la clase de IE como selector principal y así sucesivamente:[endif] [endif] [endif] [endif] [endif] > -> Espero que esta solución pueda serte útil y te ayude. Para obtener más información sobre los caracteres especiales aplicados en CSS y que identifican las versiones de IE, puede echar un vistazo a:
Cómo crear una hoja de estilo solo para IE
¡Feliz codificación!