Verlaufsfarben in Internet Explorer

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

Frage

Ich weiß, dass Internet Explorer einige proprietäre Erweiterungen hat, so dass Sie Dinge wie schaffen divs mit einem Gradienten Hintergrund zu tun. Ich kann nicht die Elementnamen erinnern oder es ist Nutzung. Hat jemand ein paar Beispiele oder Links haben?

War es hilfreich?

Lösung

Sehen Sie sich die benutzerdefinierte CSS-Filter IE umgehen kann http://msdn.microsoft.com/en-us/library/ms532847.aspx

Andere Tipps

Der Code, den ich für alle Browser verwenden Steigungen: 

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;

Sie müssen eine Höhe oder zoom: 1 angeben hasLayout das Element für diese gelten, in IE zu arbeiten.

Update:

Hier ist ein WENIGER Mixin (CSS) Version für alle Sie LESS User da draußen: 

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

Der filter Stil sollte für IE8 und IE9 arbeiten. 

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

Eine signifikante Gotcha, wenn es um Gradienten in IE kommt, ist, dass, obwohl Sie Microsoft Filter verwenden können ... 

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

... sie töten klar Typ auf einen beliebigen Text durch den Gradienten bedeckt. Da der Zweck von Gradienten normalerweise ist die Benutzeroberfläche besser aussehen zu machen, das ist ein Show-Stopper für mich.

Also für IE ich stattdessen ein sich wiederholendes Hintergrundbild verwenden. Wenn das CSS-Hintergrundbild für anderen Browser mit dem Gradienten CSS kombiniert (per Blowsie Antwort), anderer Browser wird das Hintergrundbild für die Gradienten CSS ignorieren, so wird es nur Anwendung auf IE enden. 

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

Es gibt viele Websites, die Sie schnell einen Gradienten Hintergrund erzeugen verwenden können; Ich benutze diese .

Großes Werkzeug von Microsoft, können Sie Farben in Echtzeit und erzeugt CSS für alle Browser untersuchen: 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%);

dachte, ich würde diesen nützlichen Link hinzufügen: http://css3please.com/

Zeigt an, wie Steigungen erhalten in allen Browsern arbeiten.

Beachten Sie, dass IE10 wird Steigungen unterstützt wie folgt: 

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

Von ScriptFX.com Artikel : 

<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>

Versuchen Sie folgendes: 

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

Zwei Dinge, die ich entdeckt, während sie mit IE 9 Gradienten zu kämpfen.

  1. Die -ms-filter nicht für mich arbeiten. Ich hatte einfach filter zu verwenden.
  2. Ich hatte height: 100% meine Klasse hinzuzufügen für IE die Gradienten zu verwenden.
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top