HSLA jest rozwinięciem omawianego nieco wcześniej modelu barw HSL, który dodatkowo uzupełniono o obsługę przezroczystości.
Zapis koloru czerwonego w modelu HSL stosowany w trzeciej specyfikacji CSS wygląda następująco:
BODY
{
background-color:hsla(0,100%,50%,0.2);
}
Jak widzisz, poza zapisem pierwszych trzech właściwości koloru na końcu dodano informacje o stopniu przezroczystości. Stopień przezroczystości może przybierać wartość od 0 do 1 z krokiem co 0.1. Na przykładzie widocznym poniżej przedstawiłem stopniowanie przezroczystości dla koloru czerwonego.
<<przykład>>
<div class="przyklad">
<div style="background-color:hsla(0,100%,50%,0);width:50px;height:50px;">0</div>
<div style="background-color:hsla(0,100%,50%,0.1);width:50px;height:50px;">0.1</div>
<div style="background-color:hsla(0,100%,50%,0.2);width:50px;height:50px;">0.2</div>
<div style="background-color:hsla(0,100%,50%,0.3);width:50px;height:50px;">0.3</div>
<div style="background-color:hsla(0,100%,50%,0.4);width:50px;height:50px;">0.4</div>
<div style="background-color:hsla(0,100%,50%,0.5);width:50px;height:50px;">0.5</div>
<div style="background-color:hsla(0,100%,50%,0.6);width:50px;height:50px;">0.6</div>
<div style="background-color:hsla(0,100%,50%,0.7);width:50px;height:50px;">0.7</div>
<div style="background-color:hsla(0,100%,50%,0.8);width:50px;height:50px;">0.8</div>
<div style="background-color:hsla(0,100%,50%,0.9);width:50px;height:50px;">0.9</div>
<div style="background-color:hsla(0,100%,50%,1);width:50px;height:50px;">1</div>
</div>
<</przykład>>
Niestety użytkownicy Internet Explorera muszą zadowolić się rysunkiem 15.16, ponieważ ich przeglądarka nie obsługuje modelu barw HSLA.
|
|
Rysunek 15.16. Przykład stopniowania przezroczystości w modelu barw HSLA |
Na koniec jeszcze jeden przykład wykorzystania modelu barw HSLA dla dwóch nałożonych na siebie elementów.
<div style="width:200px;height:200px;background-color:green;position:absolute;left:50px;top:50px;"> </div>
<div style="width:200px;height:200px;background-color:hsla(0,100%,50%,0.2);position:absolute;left:120px;top:120px;"> </div>
<<przykład>>
<div class="przyklad">
<div style="width:200px;height:200px;background-color:green;position:absolute;left:50px;top:50px;"> </div>
<div style="width:200px;height:200px;background-color:hsla(0,100%,50%,0.2);position:absolute;left:120px;top:120px;"> </div>
</div>
<</przykład>>
|
|
Rysunek 15.17. Przykład wykorzystania modelu barw HSLA |
