Existe-t-il un moyen connu de faire fonctionner le style CSS background-size
dans IE?
:hover
je veux que la taille de l'arrière-plan passe à la largeur totale de 300 pixels (taille de l'arrière-plan: auto) pour créer l'illusion du zoom
Existe-t-il un moyen connu de faire fonctionner le style CSS background-size
dans IE?
:hover
je veux que la taille de l'arrière-plan passe à la largeur totale de 300 pixels (taille de l'arrière-plan: auto) pour créer l'illusion du zoom
Réponses:
Un peu tard, mais cela pourrait aussi être utile. Il existe un filtre IE, pour IE 5.5+, que vous pouvez appliquer:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";
Cependant, cela met à l'échelle l'image entière pour qu'elle tienne dans la zone allouée, donc si vous utilisez un sprite, cela peut causer des problèmes.
Spécification: AlphaImageLoader Filter @microsoft
position: relative; z-index: 999
pour entrée, un bouton à l'intérieur de ces divs
J'ai créé jquery.backgroundSize.js : un plugin jquery 1.5K qui peut être utilisé comme solution de secours IE8 pour les valeurs "cover" et "contain". Jetez un œil à la démo .
background-position: fixed
.
Grâce à cet article, mon css complet pour le bonheur de tous les navigateurs est:
<style>
.backgroundpic {
background-image: url('img/home.jpg');
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='img/home.jpg',
sizingMethod='scale');
}
</style>
Cela fait si longtemps que je n'ai pas travaillé sur ce morceau de code, mais j'aimerais ajouter pour plus de compatibilité avec le navigateur, j'ai ajouté ceci à mon CSS pour plus de compatibilité avec le navigateur:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
Même plus tard, mais cela pourrait être utile aussi. Il y a le plugin jQuery-backstretch que vous pouvez utiliser comme polyfill pour background-size: cover. Je suppose qu'il doit être possible (et assez simple) de récupérer la propriété css-background-url avec jQuery et de la transmettre au plugin jQuery-backstretch. Une bonne pratique serait de tester la prise en charge de la taille d'arrière-plan avec modernizr et d'utiliser ce plugin comme solution de secours.
Le plugin backstretch a été mentionné sur SO ici . Le site jQuery-backstretch-plugin est ici .
De la même manière, vous pouvez créer un plugin jQuery ou un script qui fait fonctionner la taille de l'arrière-plan dans votre situation (taille de l'arrière-plan: 100%) et dans IE8-. Donc, pour répondre à votre question: oui, il y a un moyen, mais il n'y a pas de solution plug-and-play (c'est-à-dire que vous devez coder vous-même).
(avertissement: je n'ai pas examiné à fond le plugin backstretch mais il semble faire la même chose que background-size: cover)
Il existe un bon polyfill pour cela: louisremi / background-size-polyfill
Pour citer la documentation:
Téléchargez backgroundize.min.htc sur votre site Web, avec le .htaccess qui enverra le type mime requis par IE (Apache uniquement - il est intégré à nginx, node et IIS).
Partout où vous utilisez background-size dans votre CSS, ajoutez une référence à ce fichier.
.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); }
contain
et cover
. Il contient 5,7 Ko pas très mal car il sera transféré dans un seul paquet réseau.
vous pouvez utiliser ce fichier ( https://github.com/louisremi/background-size-polyfill «background-size polyfill») pour IE8 qui est vraiment simple à utiliser:
.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}
J'ai essayé avec le script suivant -
.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;
}
Cela a fonctionné pour moi!