CSS-Referenzhandbuch

CSS @Regel(RULES)

CSS-Attribut大全

CSS @charset-Regel CSS-Funktionen (Functions)

CSS-Funktion hsl()

Die CSS-Funktion hsl() kann verwendet werden, um Farben im CSS zu spezifizieren. Sie ermöglicht es Ihnen, Farben durch Angabe des Farbtons, der Sättigung und der Helligkeit zu spezifizieren.

CSS Funktion

Online-Beispiel

Definieren Sie HSL-Farben:

Beispiel

<!DOCTYPE　html>
<title>Grundlegende Anleitung(oldtoolbag.com)</title>　
<style>
body　{
　　　　background:　hsl(30,　100%,　50%);
　　　　color:　hsl(30,　100%,　75%);
　　　　font-size:　1.3em;
　　　　}
</style>
<h1>Down in Africa</h1>
<p>Es dauert einige Zeit, Dinge zu tun, die wir noch nie getan haben.../p>

Testen Sie es heraus ‹/›

Definition und Verwendung

Die hsl() Funktion verwendet Farbton, Sättigung und Helligkeit, um Farben zu definieren.

HSL ist Farbton, Sättigung, Helligkeit (Englisch: Hue, Saturation, Lightness).

Farbton (H)Ist die grundlegende Eigenschaft der Farbe, das ist der gewöhnliche Farbnamen, wie Rot, Gelb usw.
Sättigung (S)Ist die Reinheit der Farbe, je höher die Reinheit der Farbe, desto reinere Farbe, niedriger wird sie allmählich grau, nehmen Sie 0-100% Wert.
Helligkeit (L), nehmen Sie 0-100%, Erhöhen Sie die Helligkeit, die Farbe wird in Weiß verändert; Verringern Sie die Helligkeit, die Farbe wird in Schwarz verändert.

HSL ist eine Darstellung der Punkte im zylindrischen Koordinatensystem des RGB-Farbraums. Diese beiden Darstellungen versuchen, intuitiver als die auf dem kartesischen Koordinatensystem basierende geometrische Struktur des RGB zu sein.

Unterstützte Version: CSS3

Browser-Kompatibilität

Die Zahlen in der Tabelle stellen die erste Browser-Version dar, die die Funktion unterstützt.

Funktion
hsl()	1.0	9.0	1.0	3.1	9.5

CSS Syntax

hsl(hue,　sättigung,　lichtheit)

Wert	Beschreibung
Farbton - Farbton	Definieren Sie den Farbton (0 bis 36) - 0 (oder 36) ist Rot, 120 ist Grün, 240 ist Blau
Sättigung - Sättigung	Definieren Sie die Sättigung; 0% ist Grau, 100% ist Vollton
Lichtheit - Helligkeit	Definieren Sie den Helligkeitsgrad 0% als dunkel, 50% ist Normal, 100% ist Weiß

Beispiel für Farbveränderungen

In der folgenden Tabelle sind die Farbton- und Helligkeitswerte aller Proben vollständig gleich. Der einzige Unterschied ist die Sättigung.

`hsl(240, 100%, 5)`
`hsl(240, 90%, 5)`
`hsl(240, 80%, 5)`
`hsl(240, 70%, 5)`
`hsl(240, 60%, 5)`
`hsl(240, 50%, 5)`
`hsl(240, 40%, 5)`
`hsl(240, 30%, 5)`
`hsl(240, 20%, 5)`
`hsl(240, 10, 5)`
`hsl(240, 0%, 5)`

In dem folgenden Bild sind die Farbton- und Sättigungswerte aller Proben vollständig gleich. Der einzige Unterschied ist der Helligkeitsgrad.

`hsl(240, 100%, 10)`
`hsl(240, 100%, 9)`
`hsl(240, 100%, 8)`
`hsl(240, 100%, 7)`
`hsl(240, 100%, 6)`
`hsl(240, 100%, 5)`
`hsl(240, 100%, 4)`
`hsl(240, 100%, 3)`
`hsl(240, 100%, 2)`
`hsl(240, 100%, 10)`

CSS Funktion

CSS @charset-Regel CSS-Funktionen (Functions)