harmonogram kursów

Podręcznik referencyjny CSS

CSS właściwości

Kursy dodatkowe

Polecane kursy:

Skarbonka CodeW3C.com

Funkcja CSS hsl()

Poprzednia strona Funkcja grayscale() w CSS
Następna strona Funkcja hue-rotate() w CSS
Wróć do poprzedniego poziomu Podręcznik referencyjny funkcji CSS

Definicja i użycie

CSS hsl() Funkcja używa modelu kolorów HSL (Hue-Saturation-Lightness) do określania kolorów. Można również dodać opcjonalny składnik alpha (oznaczający przezroczystość koloru).

Wskazówka:HSL reprezentuje ton (Hue), nasycenie (Saturation) i jasność (Lightness), jest to reprezentacja cylinدرiczna koloru.

Uwaga:hsla() Funkcja jest hsl() Alternatywna nazwa funkcji. Zaleca się używanie hsl() Funkcja.

Przykład

Przykład 1

Definiowanie różnych kolorów HSL(A):

#p1 {background-color:hsl(120 100% 50%);} /* Zielony */
#p2 {background-color:hsl(120 100% 75%);} /* Jasny zielony */
#p3 {background-color:hsl(120 100% 25%);} /* Ciemny zielony */
#p4 {background-color:hsl(120 100% 25% / 20%);} /* Przezroczysty ciemny zielony */
#p5 {background-color:hsl(120 60% 70%);} /* Miękki zielony */
#p6 {background-color:hsl(290 100% 50%);} /* Fiolet */
#p7 {background-color:hsl(290 60% 70%);} /* Miękki fiolet */
#p8 {background-color:hsl(290 60% 70% / 0.3);} /* Przezroczysty miękki fiolet */

Spróbuj sam

Przykład 2

Stara gramatyka wartości rozdzielonych przecinkami:

#p1 {background-color:hsl(120, 100%, 50%);} /* Zielone */
#p2 {background-color:hsl(120, 100%, 75%);} /* Jasnozielone */
#p3 {background-color:hsl(120, 100%, 25%);} /* Ciemnozielone */
#p4 {background-color:hsl(120, 60%, 70%);} /* Miękkie zielone */
#p5 {background-color:hsl(290, 100%, 50%);} /* Fioletowe */
#p6 {background-color:hsl(290, 60%, 70%);} /* Miękkie fioletowe */

Spróbuj sam

syntaktyka CSS

syntaktyka wartości absolutnych

hsl(odcienie nasycenie jasność / A)

wartość	opis
odcienie	Wymagane. Definiuje stopień na kole kolorów (od 0 do 360) - 0 (lub 360) to czerwony, 120 to zielony, 240 to niebieski.
nasycenie	Wymagane. Definiuje nasycenie koloru; 0% to szary, 100% to pełny kolor (pełna nasycenie). Można również użyć None (jest to same jak 0%).
jasność	Wymagane. Definiuje jasność koloru; 0% to czarny, 50% to normalny, 100% to biały. Można również użyć None (jest to same jak 0%).
/ A	Opcjonalne. Oznacza wartość kanału alpha koloru (od 0% (lub 0) - całkowicie przezroczysty do 100% (lub 100) - całkowicie nieprzejrzysty). Można również użyć None (oznaczające brak kanału alpha). Domyślna wartość to 100%.

syntaktyka wartości względnych

hsl(odcienie odcienie odcienie nasycenie jasność / A)

wartość	opis
odcienie odcienie	odcienie To jest oryginalny kolor, na którym opiera się względny kolor.
odcienie	Wymagane. Definiuje stopień na kole kolorów (od 0 do 360) - 0 (lub 360) to czerwony, 120 to zielony, 240 to niebieski.
nasycenie	Wymagane. Definiuje nasycenie koloru; 0% to szary, 100% to pełny kolor (pełna nasycenie). Można również użyć None (jest to same jak 0%).
jasność	Wymagane. Definiuje jasność koloru; 0% to czarny, 50% to normalny, 100% to biały. Można również użyć None (jest to same jak 0%).
/ A	Opcjonalne. Oznacza wartość kanału alpha koloru (od 0% (lub 0) - całkowicie przezroczysty do 100% (lub 100) - całkowicie nieprzejrzysty). Można również użyć None (oznaczające brak kanału alpha). Domyślna wartość to 100%.