funkcja hsla() CSS

przykład

Definiowanie różnych kolorów HSL z nieprzejrzystością:

#p1 {background-color:hsla(120,100%,50%,0.3);} /* Zielony */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* Jasn zielony */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* Ciemnozielony */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* Delikatnie zielony */

Spróbuj sam

definicja i użycie

funkcja hsla() używa modelu Hue-saturation-lightness-alpha (HSLA) do definiowania kolorów.

Wartości koloru HSLA są rozszerzeniem wartości koloru HSL, zawierającymi kanał Alpha - ten kanał określa przezroczystość koloru.

Wersja: CSS3

Obsługa przeglądarki

Numer w tabeli oznacza pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.

funkcja
hsla() 1.0 9.0 3.0 3.1 10.0

语法 CSS

hsla(barwa, nasycenie, jasność, alpha)
wartość opis
barwa Definicja stopnia na kołku barwnym (od 0 do 360) - 0 (lub 360) to czerwony, 120 to zielony, 240 to niebieski.
nasycenie Definicja nasycenia - 0% to odcień szary, a 100% to pełna barwność (pełna nasycenie).
jasność Definiuje jasność - 0% to czarny, 50% to normalny, 100% to biały.
alpha Definiuje przezroczystość, liczba między 0.0 (całkowicie przezroczysta) a 1.0 (całkowicie nieprzejrzysta).