hsla()
- Data publikacji
- Ostatnio edytowano
Przeznaczenie funkcji hsla()
Za pomocą funkcji hsla()
możemy określić wartość interesującego nas koloru wraz z dodatkowym procentem przezroczystości.
Parametry funkcji hsla()
- Przykładowe zapisy
-
hsla(323, 75%, 40%, 1)
hsla(-189, 100%, 85%, 0.7)
hsla(64.8, 62.8%, 95.7%, 0.39)
- hue
-
Parametr
hue
jest wymaganym parametrem funkcjihsla()
. Parametrhue
określa odcień barwy nowo powstającego koloru na podstawie koła barw. Barwa czerwona reprezentowana jest przez wartość0
, jak również przez wartość360
. Barwa zielona reprezentowana jest przez wartość120
. Barwa niebieska reprezentowana jest przez wartość240
. - saturation
-
Parametr
saturation
jest wymaganym parametrem funkcjihsla()
. Parametrsaturation
określa procent nasycenia barwy. Im większy procent tym nasycenie barwy nowo powstającego koloru będzie większe. - lightness
-
Parametr
lightness
jest wymaganym parametrem funkcjihsla()
. Parametrlightness
określa procent jasności barwy. Im większy procent tym jasność barwy nowo powstającego koloru będzie większa. - alpha
-
Parametr
alpha
jest wymaganym parametrem funkcjihsla()
. Parametralpha
określa procent przezroczystości koloru. Im większy procent tym przezroczystość nowo powstającego koloru będzie mniejsza.
Przykład funkcji hsla()
background-color:hsla(55, 75%, 60%, 0.5);
Kod źródłowy przykładu
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Darmowy Kurs CSS</title>
<style>
html {
font-size:16px;
font-family:Helvetica, sans-serif;
}
#rodzic {
background-image:url(https://webkod.pl/files/css/obrazek-01.png);
padding:1em;
}
#dziecko {
background-color:hsla(55, 75%, 60%, 0.5);
padding:1em;
font-size:1.3em;
}
</style>
</head>
<body>
<div id="rodzic">
<div id="dziecko">
tło tego elementu "div" posiada nowy kolor oraz jest przezroczyste w pięćdziesięciu procentach, ponieważ do tego elementu "div" została dodana właściwość "background-color" wraz z wartością w postaci funkcji "hsla()", w której to funkcji zostały użyte następujące wartości: "55, 75%, 60%, 0.5"
</div>
</div>
</body>
</html>
Interpretacja funkcji hsla()
-
tak
-
tak
-
tak
-
tak
-
tak, lecz od wersji 9
-
tak
Zobacz więcej informacji o interpretacji funkcji hsla().