Autor publikacji
Virtual Patriot - Administrator

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 funkcji hsla(). Parametr hue 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 funkcji hsla(). Parametr saturation 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 funkcji hsla(). Parametr lightness 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 funkcji hsla(). Parametr alpha 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);
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"

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

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9

Edge

tak

Zobacz więcej informacji o interpretacji funkcji .