webentwicklung-frage-antwort-db.com.de

Verlaufsfarben im Internet Explorer

Ich weiß, dass der Internet Explorer einige proprietäre Erweiterungen hat, mit denen Sie Divs mit einem Hintergrund mit Farbverlauf erstellen können. Ich kann mich nicht an den Elementnamen oder dessen Verwendung erinnern. Hat jemand einige Beispiele oder Links?

49
Jeremy

Schauen Sie sich die benutzerdefinierten CSS-Filter an IE kann http://msdn.Microsoft.com/en-us/library/ms532847.aspx

23
Nick

Den Code, den ich für alle Browser-Verläufe benutze:

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 angeben oder zoom: 1, um hasLayout auf das Element anzuwenden, damit dies im IE funktioniert.


pdate:

Hier ist eine WENIGER Mixin (CSS) -Version für alle WENIGER Benutzer:

.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

Der filter -Stil sollte für IE8 und IE9 funktionieren.

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

Ein wichtiges Problem bei Verläufen in IE) ist, dass Sie zwar die Filter von Microsoft verwenden können ...

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

... töten sie Klartext in jedem Text, der vom Farbverlauf abgedeckt wird. Da der Zweck von Verläufen normalerweise darin besteht, die Benutzeroberfläche besser aussehen zu lassen, ist dies für mich ein Show-Stopper.

Für IE) verwende ich stattdessen ein sich wiederholendes Hintergrundbild. Wenn das Hintergrundbild-CSS mit dem Verlaufs-CSS für andere Browser kombiniert wird (gemäß der Antwort von Blowsie), ignorieren andere Browser das Hintergrundbild des Gradienten CSS, so wird es nur auf IE angewendet werden.

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

Es gibt viele Websites, mit denen Sie schnell einen Verlaufshintergrund erstellen können. Ich benutze dies .

7

Mit dem großartigen Tool von Microsoft können Sie Farben in Echtzeit untersuchen und CSS für alle Browser generieren: 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

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

Zeigt, wie Sie Farbverläufe in allen Browsern zum Laufen bringen.

4
Sniffer

Beachten Sie, dass IE10 die folgenden Farbverläufe unterstützt:

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

Direkt 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>
2
vmarquez

Versuche dies:

.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

Zwei Dinge, die ich beim Kampf mit IE 9 gradient entdeckt habe.

  1. Das -ms-filter hat bei mir nicht funktioniert. Ich musste einfach filter verwenden.
  2. Ich musste hinzufügen height: 100% zu meiner Klasse für IE um den Farbverlauf zu verwenden.
0
Vincent