css - para - ¿Cómo hago un trabajo de fondo en IE?
hacer formulario en css (9)
Creo que la mejor manera es agregar la siguiente línea en la parte superior de tu archivo HTML. ¡Funciona bien para mí!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
¿Hay alguna manera conocida de hacer que el estilo de background-size
estilo CSS funcione en IE?
En IE11 Windows 7 esto funcionó para mí,
background-size: 100% 100%;
Gracias a esta publicación, mi css completo para la felicidad del navegador cruzado es:
<style>
.backgroundpic {
background-image: url(''img/home.jpg'');
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=''img/home.jpg'',
sizingMethod=''scale'');
}
</style>
Ha pasado tanto tiempo desde que trabajé en este fragmento de código, pero me gustaría agregar más compatibilidad con el navegador. He añadido esto a mi CSS para obtener más compatibilidad con el navegador:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Hay un buen polyfill para eso: background-size-polyfill
Para citar la documentación:
Suba backgroundsize.min.htc a su sitio web, junto con el .htaccess que enviará el tipo mime requerido por IE (Apache solamente - está construido en nginx, node e IIS).
En cualquier lugar donde use fondo de tamaño en su CSS, agregue una referencia a este archivo.
.selector { background-size: cover; /* The url is relative to the document, not to the css file! */ /* Prefer absolute urls to avoid confusion. */ -ms-behavior: url(/backgroundsize.min.htc); }
Incluso más tarde, pero esto podría ser útil también. Existe el jQuery-backstretch-plugin que puede usar como un polyfill para background-size: cover. Supongo que debe ser posible (y bastante simple) tomar la propiedad css-background-url con jQuery y pasarla al plugin jQuery-backstretch. Una buena práctica sería probar la compatibilidad con el tamaño de fondo con modernizr y utilizar este complemento como una alternativa.
El plugin backstretch fue mencionado en SO here . El jQuery-backstretch-plugin-site está here .
De forma similar, podría crear un jQuery-plugin o script que haga que el tamaño de fondo funcione en su situación (background-size: 100%) y en IE8-. Entonces, para responder a su pregunta: Sí, hay una manera, pero atm no hay una solución plug-and-play (es decir, usted mismo tiene que hacer algunos códigos).
(Descargo de responsabilidad: no examiné el backstretch-plugin a fondo, pero parece hacer lo mismo que background-size: cover)
Intenté con el siguiente script:
.selector {
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}
¡Funcionó para mí!
Un poco tarde, pero esto también podría ser útil. Hay un filtro de IE, para IE 5.5+, que puede aplicar:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=''images/logo.gif'',
sizingMethod=''scale'');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src=''images/logo.gif'',
sizingMethod=''scale'')";
Sin embargo, esto escala toda la imagen para que quepa en el área asignada, por lo que si está usando un sprite, esto puede causar problemas.
Pliego de condiciones: filtro AlphaImageLoader @microsoft
puede usar este archivo ( background-size-polyfill "polyfill de fondo") para IE8 que es realmente fácil de usar:
.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
jquery.backgroundSize.js : un plugin jquery de jquery.backgroundSize.js que se puede usar como una alternativa de IE8 para los valores de "cobertura" y "contener". Eche un vistazo a la demo .