Couleurs dégradées dans Internet Explorer

StackOverflow https://stackoverflow.com/questions/213750

Question

Je sais qu'Internet Explorer possède des extensions propriétaires qui vous permettent par exemple de créer des div avec un arrière-plan en dégradé. Je ne me souviens pas du nom de l'élément ni de son utilisation. Quelqu'un a-t-il des exemples ou des liens?

Était-ce utile?

La solution

Regardez les filtres CSS personnalisés que IE peut gérer http://msdn.microsoft.com/en-us/library/ms532847.aspx

Autres conseils

Le code que j'utilise pour tous les gradients de navigateur: 

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

Vous devrez spécifier une hauteur ou un zoom: 1 pour appliquer hasLayout à l'élément pour que cela fonctionne dans IE.

Mise à jour:

Voici une version LESS Mixin (CSS) pour tous les utilisateurs MOINS: 

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}

Le style filtre devrait fonctionner pour IE8 et IE9. 

.gradientClass
{
  filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#e6e6e6', endColorstr='#CCCCCC');       
}

Un des problèmes majeurs en ce qui concerne les dégradés dans IE est que vous pouvez utiliser les filtres de Microsoft ... 

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FCCA6D', endColorstr='#FEFEFE');
zoom:1;

... ils suppriment le texte en clair sur tout texte recouvert par le dégradé. Étant donné que l'objectif des gradients est généralement d'améliorer l'apparence de l'interface utilisateur, c'est ce qui me stoppe le spectacle.

Donc, pour IE, j'utilise plutôt une image de fond répétitive. Si le css image d’arrière-plan est combiné au CSS dégradé d’autres navigateurs (comme indiqué dans la réponse de Blowsie), les autres navigateurs ignoreront l’arrière-plan au profit du css dégradé; il ne finira donc que par s’appliquer à IE. 

background-image: url('/Content/Images/button-gradient.png');

Il existe de nombreux sites que vous pouvez utiliser pour générer rapidement un fond dégradé. J'utilise this .

Excellent outil de Microsoft, vous permet d’examiner les couleurs en temps réel et génère du CSS pour tous les navigateurs: http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html 

/* IE10 */ 
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(3, #B7B8BD));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #FFFFFF 0%, #B7B8BD 300%);

Je pensais ajouter un lien utile: http://css3please.com/

Indique comment utiliser les dégradés dans tous les navigateurs.

Notez que IE10 prend en charge les dégradés comme suit: 

background: -ms-linear-gradient(#017ac1, #00bcdf);

Droit de ScriptFX.com article : 

<body bgcolor="#000000" topmargin="0" leftmargin="0">

    <div style="width:100%;height:100%; filter: progid:
        DXImageTransform.Microsoft.Gradient (GradientType=1,
        StartColorStr='#FF006600', EndColorStr='#ff456789')">

Your page content goes in here ...... at the end of all the page content, you must close the <div> tag, immediately before the closing <body> tag.... as below

    </div>
</body>

Essayez ceci: 

.red {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e02a42', endColorstr='#a91903', GradientType=0); /* IE6-9 */
    height: 0; /* gain layout IE5+ */   
    zoom: 1; /* gain layout IE7+ */
}

Deux choses que j'ai découvertes en luttant avec le dégradé IE 9.

  1. Le -ms-filter n'a pas fonctionné pour moi. Je devais utiliser simplement filtre .
  2. J'ai dû ajouter height: 100% à ma classe pour qu'IE utilise le dégradé.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top