web-dev-qa-db-fra.com

Couleurs dégradées dans Internet Explorer

Je sais qu'Internet Explorer a des extensions propriétaires pour que vous puissiez faire des choses comme créer des divs avec un fond dégradé. Je ne me souviens pas du nom de l'élément ou de son utilisation. Quelqu'un a-t-il des exemples ou des liens?

htmlcssinternet-explorerbackgroundgradient
49
Jeremy

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

23
Nick

Le code que j'utilise pour tous les dégradés 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 zoom: 1 pour appliquer hasLayout à l'élément pour que cela fonctionne dans IE.

Mise à jour:

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

.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;
}
83
Blowsie

Le style filter devrait fonctionner pour IE8 et IE9.

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

Un problème important en ce qui concerne les dégradés dans IE est que même si vous pouvez utiliser les filtres de Microsoft ...

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

... ils tuent le type clair sur tout texte couvert par le dégradé. Étant donné que le but des gradients est normalement de rendre l'interface utilisateur plus belle, c'est un bouchon de show pour moi.

Donc pour IE j'utilise une image d'arrière-plan répétitive à la place. Si l'image CSS d'arrière-plan est combinée avec le CSS dégradé pour d'autres navigateurs (selon la réponse de Blowsie), les autres navigateurs ignoreront l'image d'arrière-plan en faveur du gradient css, donc il ne finira 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 arrière-plan dégradé; J'utilise this .

7
Jonathan Moffatt

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%);
6
thezar

Je pensais juste ajouter ce lien utile: http://css3please.com/

Montre comment faire fonctionner les dégradés dans tous les navigateurs.

4
Sniffer

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

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

Directement sur 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>
2
vmarquez

Essaye ça:

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

Deux choses que j'ai découvert en luttant avec IE 9 gradient.

  1. Le -ms-filter N'a pas travaillé pour moi. J'ai dû utiliser simplement filter.
  2. Je devais ajouter height: 100% à ma classe pour IE pour utiliser le gradient.
0
Vincent