CSS3-Tutorial (10): CSS3-HSL-Anweisungseinstellung Color_css3_CSS_Webseitenproduktion

Webseitenproduktion Webjx-Artikeleinführung: Die Verwendung von CSS3-HSL-Anweisungen wird auch zum Festlegen von Farben verwendet. Was kommt als nächstes? HSLA? Ja, das hat den gleichen Effekt wie RGBA. Farben werden auch mithilfe von CSS3-HSL-Deklarationen festgelegt. Was kommt als nächstes? HSLA? Ja, das hat den gleichen Effekt wie RGBA. Vorheriger Artikel

Die Verwendung von CSS3-HSL-Deklarationen wird auch zum Festlegen von Farben verwendet. Was kommt als nächstes? HSLA? Ja, das hat den gleichen Effekt wie RGBA.
Die Verwendung von CSS3-HSL-Deklarationen wird auch zum Festlegen von Farben verwendet. Was kommt als nächstes? HSLA? Ja, das hat den gleichen Effekt wie RGBA.
Vorheriger Artikel: CSS3-Tutorial (9): RGB-Farbe festlegen
Die HSL-Anweisung verwendet Farbton (H), Sättigung (s) und Helligkeit (L), um die Farbe festzulegen.
Der Farbton wird aus dem Farbkreis abgeleitet: 0 und 360 sind Rot, Werte nahe 120 sind Grün und 240 ist Blau.
Der Sättigungswert ist ein Prozentsatz: 0 % ist Graustufen, 100 % ist die höchste Sättigung.
Der Helligkeitswert ist ebenfalls ein Prozentsatz: 0 % ist die dunkelste, 50 % ist der Durchschnitt und 100 % ist die am hellsten.
Zufällige Gedanken: Warum ist „Lightness“? Vielleicht bin ich die „Helligkeit“ in Photoshop eher gewohnt ...
Browserkompatibilität:
Derzeit werden HSL und HSLA von den Browsern Firefox, Google Chrome und Safari gut unterstützt und erfordern kein Präfix CSS3 HSL

Die obige Demonstration wird durch den folgenden Stil implementiert
div.hslL1 { background:hsl(320, 100 %, 50 %; height:20px; } div.hslL2 { background:hsl(320, 50%, 50 %); Höhe: 20px; } div.hslL4 { Hintergrund:hsl(202, 100%, 50%); .hslL6 {background:hsl(202, 100%, 75%); height:20px; }
Browserunterstützung:

Firefox(3.05…)

Google Chrome(1.0.154 … )

Google Chrome(2.0.156…)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2 . 1 Fenster...) CSS3 HSLA

Der obige Effekt wird durch den folgenden Stil erreicht:
div.hslaL1 { background:hsla(165, 35%, 50%, 0,2) ; height:20px; } div.hslaL2 { background:hsla(165, 35%, 50%, 0,4); height:20px; , 0,6); height :20px; } div.hslaL4 { background:hsla(165, 35%, 50%, 0,8); height:20px; ); height:20px ; }
Browserunterstützung:

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156 …)

Internet Explorer(IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 Windows…)

Das Obige ist Das CSS3-Tutorial (10):CSS3 HSL-Anweisungseinstellung color_css3_CSS_Inhalt der Webseitenproduktion. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!