Wie implementieren Sie Farbverläufe in Internet Explorer 9 und höher?

Verläufe in Internet Explorer 9 und höher

Im Bereich der Webentwicklung sind Farbverläufe unverzichtbar geworden, um optisch ansprechende und ansprechende Benutzeroberflächen zu erstellen. Während Internet Explorer 9 mittlerweile als veraltet gilt, bleibt er ein Streitpunkt hinsichtlich der Gradientenunterstützung.

IE9-Gradientenpräfixabfrage

Ein Entwickler bat um Klärung des Herstellerpräfixes für Farbverläufe in IE9, was Verwirrung über die Verwendung proprietärer Filter zum Ausdruck bringt. Um dieses Problem anzugehen, wenden wir uns einer umfassenden Gradientenimplementierung über mehrere Browser hinweg zu:

background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */

Moderne Browser-Gradienten

Mit fortschreitender Webentwicklung führte IE10 jedoch eine neue ein Gradientensyntax, gefolgt von ähnlichen Implementierungen in anderen wichtigen Browsern. Hier ist ein aktualisierter Codeausschnitt, der die Farbverlaufsunterstützung in modernen Browsern zeigt:

/* IE10 */ 
background-image: -ms-linear-gradient(top, #444444 0%, #999999 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #444444 0%, #999999 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #444444 0%, #999999 100%);

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

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #444444 0%, #999999 100%);

/* Proposed W3C Markup */ 
background-image: linear-gradient(top, #444444 0%, #999999 100%);

Mit diesem aktualisierten Code können Sie eine konsistente Farbverlaufswiedergabe in allen gängigen Browsern, einschließlich IE10 und höher, erreichen. Denken Sie daran, dass moderne Browser auch die Verwendung von RGB/RGBA-Werten anstelle der Hexadezimalschreibweise für Farbdefinitionen unterstützen.

Das obige ist der detaillierte Inhalt vonWie implementieren Sie Farbverläufe in Internet Explorer 9 und höher?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!