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 Chrome de Google 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 atribuir 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, archivo 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 PISO PRIMERA 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;
fondo: url (images / bk_body.png), url (“adv / skin-amazon.jpg”);
repetición de fondo: repetición x, no repetición;
posición de fondo: centro superior! importante;
archivo adjunto de fondo: local, fijo! importante;
}
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;
fondo: url (images / bk_body.png), url (“adv / skin-amazon.jpg”);
repetición de fondo: repetición x, no repetición;
posición de fondo: centro superior! importante;
archivo adjunto de fondo: local, fijo! importante;
archivo adjunto de fondo: local9! important; / * se aplica a todos, es decir, a partir de 8 y menos * /
* archivo adjunto de fondo: local; !importante; / * se aplica a ie 7 y menos * /
_background-Attachment: local; !importante; / * se aplica a ie 6 y menos * /}
/ * aplicado para problemas con IE11 y versiones anteriores * /
@media all y (-ms-high-contrast: none), (-ms-high-contrast: active) {
cuerpo {archivo adjunto de fondo: local! importante;}
}
Si también desea aplicarlo a Microsoft Edge, simplemente agregue estas líneas de código en su CSS:
@supports (-ms-accelerator: true) {
/ * Los estilos CSS de IE Edge 12+ van aquí * /
}
Esta primera solución consiste en declarar reglas CSS que solo Internet Explorer puede leer. Por ejemplo, un asterisco (*) antes de la propiedad CSS o un guión bajo (_) como puede ver indican las versiones de Internet Explorer. Lo mismo ocurre con la adición de 9 antes del punto y coma, para indicar IE8 o menos, y así sucesivamente. P.ej:
- IE8 o inferior: para escribir reglas CSS específicamente para IE8 o inferior, agregue una barra invertida y 9 (9) al final antes del punto y coma.
- IE7 o inferior: agregue un asterisco (*) antes de la propiedad CSS.
- IE6: agregue un guión bajo (_) antes de la propiedad.
.caja {
Fondo: gris; / * estándar * /
Fondo: rosa 9; / * IE 8 y posterior * /
* Fondo: verde; / * IE 7 y posterior * /
_background: blu; / * IE 6 * /
Recuerde que si desea actuar en su lugar en el archivo HTML dentro del HEAD, tiene otras soluciones.
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:
= IE8
= IE8 o menos
= mayor o igual que IE8
/ * css para IE 8 * /
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:
Espero que esta solución te sea de utilidad y te sea de ayuda.
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!
