RGBA jest rozwinięciem dobrze znanego modelu barw RGB, który dodatkowo uzupełniono o obsługę przezroczystości. Zapis koloru zielonego w modelu RGBA stosowany w trzeciej specyfikacji CSS wygląda następująco:
BODY
{
background-color:rgba(0,255,0,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 zielonego.
<<przykład>>
<div class="przyklad">
<div style="background-color:rgba(0,255,0,0);width:50px;height:50px;">0</div>
<div style="background-color:rgba(0,255,0,0.1);width:50px;height:50px;">0.1</div>
<div style="background-color:rgba(0,255,0,0.2);width:50px;height:50px;">0.2</div>
<div style="background-color:rgba(0,255,0,0.3);width:50px;height:50px;">0.3</div>
<div style="background-color:rgba(0,255,0,0.4);width:50px;height:50px;">0.4</div>
<div style="background-color:rgba(0,255,0,0.5);width:50px;height:50px;">0.5</div>
<div style="background-color:rgba(0,255,0,0.6);width:50px;height:50px;">0.6</div>
<div style="background-color:rgba(0,255,0,0.7);width:50px;height:50px;">0.7</div>
<div style="background-color:rgba(0,255,0,0.8);width:50px;height:50px;">0.8</div>
<div style="background-color:rgba(0,255,0,0.9);width:50px;height:50px;">0.9</div>
<div style="background-color:rgba(0,255,0,1);width:50px;height:50px;">1</div>
</div>
<</przykład>>
Niestety użytkownicy Internet Explorera muszą zadowolić się rysunkiem 15.18, ponieważ ich przeglądarka nie obsługuje modelu barw RGBA.
|
|
Rysunek 15.18. Przykład stopniowania przezroczystości w modelu barw RGBA |
