web-dev-qa-db-fra.com

Comment faire fonctionner l'image de fond avec un gradient linéaire sur IE 11?

Toute idée comment je peux faire background-image avec linear-gradient pour travailler sur IE 11?

Le code suivant fonctionne correctement sur IE 10 mais ne fonctionne pas sur IE 11.

background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);

Je peux faire linear-gradient pour travailler sur IE 6-9, 11 en utilisant le filter suivant mais l'image d'arrière-plan ne s'affiche pas dans ce cas.

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 )

Je suis ouvert à des idées.

pdate: Voici le code que j'ai actuellement.

background-image: url(IMAGE), -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#BEE38F));
background-image: url(IMAGE), -webkit-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -moz-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -ms-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), -o-linear-gradient(top, #ffffff, #BEE38F);
background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#BEE38F',GradientType=0 );
cssbackground-imagelinear-gradientsinternet-explorer-11
18
Vadim

linear-gradient() est pris en charge sans préfixe sur IE10 RTM et versions ultérieures, y compris IE11. Vous n'avez jamais besoin du préfixe -ms- - seules les versions préliminaires d'IE10 l'exigeaient et ces versions ne fonctionnent même plus . Vous perdez juste de l'espace en incluant le préfixe dans votre CSS.

Notez que la syntaxe directionnelle pour linear-gradient() est différente; ce qui était à l'origine top est maintenant représenté comme to bottom à la place (voir ce billet de blog , cette question , et le spec pour plus de détails):

background-image: url(IMAGE), linear-gradient(to bottom, #ffffff, #BEE38F);
21
BoltClock

Fou, n'est-ce pas?

Avant IE 11,

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cccccc');

Pour IE 11:

background-image: -ms-linear-gradient(top, #FFFFFF 0%, #CCCCCC 100%);

C'est vrai, nous devons non seulement nous soucier de la prise en charge des anciens IE, mais apparemment, nous devrons maintenant faire face à NEWER IE bizarreries également ...

10
Hank

Ce sont toutes d'excellentes solutions si vous superposez un dégradé linéaire directement sur le texte. Mais si vous voulez l'afficher sur une image, cela ne fonctionne pas dans IE .. ne me demandez pas pourquoi mais ce n'est pas le cas.

J'ai parcouru de nombreuses ressources et j'ai finalement trouvé cela diddy

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
 .yourTargetClass:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: linear-gradient(-221deg, rgba(205,234,255,0.41), rgba(227,253,255,0.82)); /* THIS IS WHAT EVER OVERLAY COLOUR YOU WANT */ }
    opacity:0.55;
  }
}

J'ai enveloppé cela dans un sélecteur IE pour 10+. Vous devez inclure l'opacité car cela aidera à mélanger la superposition de dégradé avec le contenu.

J'espère que cela aide quelqu'un!

1
shaneonabike

J'ai fait face au même problème et en plus de faire le filtre et le gradient linéaire, j'ai également dû ajouter le largeur dans ma classe CSS, une fois que j'ai défini la largeur, je pouvais voir mes styles personnalisés avec un arrière-plan pente.

0
Swetha Sankaran