Kompatibilitätsprobleme mit CSS3-Farbverlaufshintergründen

Wenn wir eine Hintergrundfarbe mit Farbverlauf erstellen, verwenden wir die Funktion linear-gradient(), um ein „Bild“ mit linearem Farbverlauf zu erstellen. Es ist die Syntax in CSS3 und ist zumindest mit IE10 kompatibel

Hintergrundbild: linearer Farbverlauf (nach rechts, #ff9000, #ff5000);

Richtung: Wird verwendet, um die Gradientenrichtung anzugeben. Es kann einen Winkelwert (verfügbar in Grad, Rad, Neungrad oder Drehung) oder ein Richtungsschlüsselwort (oben, rechts, unten, links, links oben, oben rechts, unten rechts oder links unten) akzeptieren.

color-start, color-end: gibt jeweils die Startfarbe und die Endfarbe an

Dies ist ein Beispiel für die Navigationsleiste von Taobao. Ihre Verlaufsfarbe ist wie folgt implementiert:

Hintergrundbild: linearer Farbverlauf (nach rechts, #ff9000, #ff5000);

Allerdings ist linear-gradient() zumindest mit IE10 kompatibel. Um mit IE8 und IE9 kompatibel zu sein, können Sie stattdessen nur filter verwenden, und zwar wie folgt:

Hintergrundbild: linearer Farbverlauf (nach rechts, #ff9000, #ff5000);
Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', 
endColorstr='#ffff5000', GradientType=1);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff9000', 
endColorstr='#ffff5000', GradientType=1);

Wenn wir Filter verwenden, um Farbverläufe zu erzielen, müssen wir darauf achten, dass der Farbwert nicht mit Abkürzungen (wie #000) ausgefüllt werden kann, sondern vollständig geschrieben werden muss. Schauen wir uns den Unterschied zwischen #000 und #000000 an:

Wenn es #000 ist

filter:progid:DXImageTransform.Microsoft.gradient
(startColorstr='#000',
 endColorstr='#ffff5000', 
Farbverlaufstyp = 1)
;

Ausführungsergebnis:

Wenn es #000000 ist

Filter:progid:
DXImageTransform.Microsoft.gradient
(startColorstr='#000000', 
endColorstr='#ffff5000', GradientType=1);

Ausführungsergebnis:

Als nächstes analysieren wir den Wert im Filter:

Aufmerksame Freunde können sehen, dass die Farbwerte startColorstr und endColorstr im Filter zwei weitere ff enthalten. Tatsächlich stellen startColorstr und endColorstr nicht einfach Farben dar. Ihr Format sollte #AARRGGBB sein. AA, RR, GG, BB sind positive hexadezimale Ganzzahlen. Der Wertebereich ist 00 – FF. RR gibt Rotwerte an, GG gibt Grünwerte an und BB gibt Blauwerte an. AA steht für Transparenz. 00 ist völlig transparent. FF ist völlig undurchsichtig. Werte außerhalb des Bereichs werden auf den Standardwert zurückgesetzt. Der Wertebereich ist #FF000000 – #FFFFFFFF. AA ähnelt dem a in rgba(), das wir zuvor gelernt haben. Beide werden zum Festlegen der Transparenz verwendet.

GradientType=1 gibt die Richtung an, 1 gibt die horizontale Richtung an, 0 gibt die vertikale Richtung an

Dies ist das Ende dieses Artikels über die Kompatibilitätsprobleme der Implementierung von Verlaufshintergründen in CSS3. Weitere relevante Inhalte zu CSS3-Verlaufshintergründen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!