English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
定义 HSL 颜色，并设置透明度：
<!DOCTYPE html>
<title>基础教程(oldtoolbag.com)</title>
<style>
body {
background: url('/run/images/bg2.png') beige;
color: hsla(0, 0%, 0%, 1);
font-size: 2em;
}
article {
background-color: hsla(30, 100%, 50%, 0.5);
border: 5px solid darkorange;
margin: 20px;
text-align: center;
}
</style>
</head>
<body>
<article>
<h1>Stars</h1>
</article>
</body>
</html>Testen Sie es heraus ‹/›Die Funktion hsla() verwendet Farbton, Sättigung, Helligkeit und Transparenz, um Farben zu definieren.
HSL ist Farbton, Sättigung, Helligkeit, Transparenz (Englisch: Hue, Saturation, Lightness, Alpha).
Farbton (H)ist das grundlegende Eigenschaft der Farbe, das ist das, was wir gewöhnlich als Farbname bezeichnen, wie Rot, Gelb usw.
Sättigung (S)Bezeichnet die Reinheit der Farbe, je höher der Farbton, desto rein die Farbe, niedriger wird sie allmählich grau, nehme 0-100% Wert.
Helligkeit (L) 0-100%, erhöht Helligkeit, die Farbe verändert sich in Weiß; verringert Helligkeit, die Farbe verändert sich in Schwarz.
Transparenz (A) Wertebereich 0~1 zwischen, stellt Transparenz dar.
Unterstützte Versionen: CSS3
Die Zahlen in der Tabelle stellen die erste Browserversion dar, die die Funktion unterstützt.
| Funktion | |||||
|---|---|---|---|---|---|
| hsla() | 1.0 | 9.0 | 1.0 | 3.1 | 9.5 |
hsla(hue, saturation, lightness, alpha)
| Wert | Beschreibung |
|---|---|
| hue - Farbton | Definiert Farbton (0 bis 360) - 0 (oder 360) ist Rot, 120 ist Grün, 240 ist Blau |
| saturation - Sättigung | Definiert Sättigung; 0% ist Grau, 100% ist Vollfarbe |
| lightness - Helligkeit | Definiert Helligkeit 0% als dunkel, 50% ist Normal, 100% ist Weiß |
| alpha - Transparenz | Definiert Transparenz 0 (Vollständig durchsichtig) ~ 1(Vollständig durchsichtig) |
Hier ist ein Beispiel für das gleiche Farbspektrum mehrmals wiederholt (auf dem Hintergrundbild), aber mit verschiedenen Alpha-Werten für jede Farbe.
Alle anderen Werte sind gleich (d.h. alle Zeilen des Farbtons, der Sättigung und der Helligkeit sind gleich), nur der Alpha-Kanal wird geändert.
Das bedeutet, dass das Hintergrundbild mit zunehmendem Alpha-Wert immer weniger sichtbar wird (Sterne sind das Hintergrundbild).
hsla(240, 100%, 50%, 0) | |
hsla(240, 100%, 50%, 0.1) | |
hsla(240, 100%, 50%, 0.2) | |
hsla(240, 100%, 50%, 0.3) | |
hsla(240, 100%, 50%, 0.4) | |
hsla(240, 100%, 50%, 0.5) | |
hsla(240, 100%, 50%, 0.6) | |
hsla(240, 100%, 50%, 0.7) | |
hsla(240, 100%, 50%, 0.8) | |
hsla(240, 100%, 50%, 0.9) | |
hsla(240, 100%, 50%, 1) |
Im Vergleich zum RGB-Farbkreis ist der HSL-Farbkreis für die Farbenlegung intuitiver. Besonders wenn Sie die Funktion von HSL verstehen.
Ich habe darüber geschrieben hsl() Inhalt der Funktion, die erklärt hsla()Die Funktion ist detaillierter als hier beschrieben. Wenn Sie unsicher sind, wie Sie die Basisfarbe einstellen und anpassen können, überprüfen Sie bitte nach.