Heim > Artikel > Web-Frontend > Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)
Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)
- 青灯夜游Original
- 2018-10-17 10:57:406566Durchsuche
Wie verwende ich hsl() und hsla(), um Farbwerte in CSS festzulegen? In diesem Artikel wird kurz darauf eingegangen, wie man mit hsl() und hsla() Farbwerte in CSS festlegt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Es gibt zwei Möglichkeiten, Farbwerte in CSS festzulegen: hsl() und hsla() Sie verwenden grundsätzlich die HSL-Farbmodusmethode, um Farben festzulegen. Schauen wir uns also an, welchen HSL-Farbmodus Sie verwenden.
Der HSL-Farbmodus ist ein Farbstandard in der Branche. Er ändert die drei Farbkanäle Farbton (H), Sättigung (S) und Helligkeit (L) und überlagert sie, um ein breites Bild zu erhalten Vielfalt an Farben. Der HSL-Farbstandard umfasst fast alle Farben, die vom menschlichen Auge wahrgenommen werden können, und ist derzeit eines der am weitesten verbreiteten Farbsysteme.
HSL stellt die Farbe der drei Kanäle Farbton, Sättigung und Helligkeit dar
Und HSLA fügt eine auf HSL basierende Transparenzeinstellung (A) hinzu.
Da wir nun wissen, was der HSL-Farbmodus ist, werfen wir einen Blick darauf, wie man hsl() und hsla() in CSS verwendet, um Farbwerte festzulegen.
Die grundlegende Syntax von hsl() und Farbwert in CSS
hsl():
hsl(H,S,L);
H (hue: Hue): abgeleitet von Farbscheibe, wobei 0 und 360 für Rot stehen, nahe 120 für Grün und 240 für Blau;
S (Sättigung: Sättigung): Der Wert ist ein Prozentsatz, 0 % steht für Graustufen und 100 % steht für höchste Sättigung;
L (Helligkeit: Helligkeit): Der Wert ist ebenfalls ein Prozentsatz, wobei 0 % für die dunkelste, 50 % für den Durchschnitt und 100 % für die hellste steht.
Wir können ein einfaches Codebeispiel verwenden, um zu sehen, wie hsl() den Farbwert festlegt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hsl()和颜色</title>
<style>
.demo{width: 400px;height: 240px;margin: 50px auto;}
.hslL1 { background:hsl(320, 100%, 50%); height:40px; }
.hslL2 { background:hsl(320, 50%, 50%); height:40px; }
.hslL3 { background:hsl(320, 100%, 75%); height:40px; }
.hslL4 { background:hsl(202, 100%, 50%); height:40px; }
.hslL5 { background:hsl(202, 50%, 50%); height:40px; }
.hslL6 { background:hsl(202, 100%, 75%); height:40px; }
</style>
</head>
<body>
<div class="demo">
<div class="hslL1"></div>
<div class="hslL2"></div>
<div class="hslL3"></div>
<div class="hslL4"></div>
<div class="hslL5"></div>
<div class="hslL6"></div>
</div>
</body>
</html>Rendering:
Es ist ersichtlich, dass sie den gleichen Farbton haben, nur die Sättigung oder Helligkeit ändern, es wird eine andere Farbe
background:hsl(320, 100%, 50%); background:hsl(320, 50%, 50%); background:hsl(320, 100%, 75%);
%20und%20hsla()%20Farbwerte%20in%20CSS%20festlegt%20(ausf%C3%BChrliche%20Erkl%C3%A4rung%20mit%20Bildern%20und%20Text) "153974305188597Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)")
background:hsl(202, 100%, 50%); background:hsl(202, 50%, 50%); background:hsl(202, 100%, 75%);
%20und%20hsla()%20Farbwerte%20in%20CSS%20festlegt%20(ausf%C3%BChrliche%20Erkl%C3%A4rung%20mit%20Bildern%20und%20Text) "153974350337740Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)")
hsla() in 🎜>
css: Die H, S, L vonhsla(H,S,L,A);hsla() sind die gleichen wie hsl(). Es stellt Farbton dar, Sättigung und Helligkeit sowie die Grundeinstellungen sind gleich, daher werde ich sie hier nicht vorstellen. Werfen wir einen Blick auf den A-Attributwert von hsla(): A (Transparenz: Alpha): Der Wert ist eine Zahl zwischen 0 und 1, wobei 0 für undurchsichtig und 1 für völlig transparent steht. Sehen wir uns anhand eines einfachen Codebeispiels an, wie hsla() den Farbwert festlegt:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{width: 400px;height: 240px;margin: 50px auto;}
.hslaL1 { background:hsla(165, 35%, 50%, 0.2); height:40px; }
.hslaL2 { background:hsla(165, 35%, 50%, 0.4); height:40px; }
.hslaL3 { background:hsla(165, 35%, 50%, 0.6); height:40px; }
.hslaL4 { background:hsla(165, 35%, 50%, 0.8); height:40px; }
.hslaL5 { background:hsla(165, 35%, 50%, 1.0); height:40px; }
</style>
</head>
<body>
<div class="demo">
<div class="hslaL1"></div>
<div class="hslaL2"></div>
<div class="hslaL3"></div>
<div class="hslaL4"></div>
<div class="hslaL5"></div>
<div class="hslaL6"></div>
</div>
</body>
</html>Rendering:
%20und%20hsla()%20Farbwerte%20in%20CSS%20festlegt%20(ausf%C3%BChrliche%20Erkl%C3%A4rung%20mit%20Bildern%20und%20Text) "153974447468790Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)")
background:hsla(165, 35%, 50%, 0.2); background:hsla(165, 35%, 50%, 0.4); background:hsla(165, 35%, 50%, 0.6); background:hsla(165, 35%, 50%, 0.8); background:hsla(165, 35%, 50%, 1.0);Werfen wir einen Blick auf die Browserkompatibilität von hsl() und hsla():
CSS-Basis-Video-Tutorial , CSS3-Video-Tutorial , Bootstrap-Video-Tutorial !
Das obige ist der detaillierte Inhalt vonEine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Zusammenfassung von sechs Implementierungsmethoden des JSDOMReady-Ereignisses
- Beispiele für die CSS-Implementierung verschiedener Spaltenlayouts auf der Seite
- Reine CSS3-Vollbild-Diashow-Effekte
- Reiner CSS3-Stil mit coolen, farbenfrohen 3D-Schaltflächen
- Atemberaubende sechseckige CSS3-Menüanimationseffekte