Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)-CSS-Tutorial-php.cn

Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)

青灯夜游

Freigeben： 2018-10-17 11:21:37

Original

6677 Leute haben es durchsucht

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);

Nach dem Login kopieren

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>

Nach dem Login kopieren

Rendering:

Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)

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%);

Nach dem Login kopieren

Eine 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%);

Nach dem Login kopieren

Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text) < Die grundlegende Syntax von hsla( ) und Farbwert

hsla() in 🎜>

css: Die H, S, L von

hsla(H,S,L,A);

Nach dem Login kopieren

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>

Nach dem Login kopieren

Rendering:

Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)

Von Im obigen Beispiel können wir sehen, dass Farbton, Sättigung und Helligkeit dieser sechs Farben gleich sind, aber durch Ändern der Transparenz unterschiedliche Farben angezeigt werden.

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);

Nach dem Login kopieren

Werfen wir einen Blick auf die Browserkompatibilität von hsl() und hsla():

Eine kurze Diskussion darüber, wie man mit hsl() und hsla() Farbwerte in CSS festlegt (ausführliche Erklärung mit Bildern und Text)

Derzeit sind hsl() und hsla() verfügbar in Firefox, Browser wie Google Chrome und Safari werden gut unterstützt und können ohne Präfix verwendet werden.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter

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!