Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Obsługa modelu barw RGBA

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15281197