Przezroczystość

piątek, 12 marzec 2010 08:33 Administrator
Drukuj

opacity

Dostępne wartości:

0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1 | inherit

Wartość domyślna:

1

Przykład:

p {opacity:0.2;}

Dziedziczenie:

Tak

Obsługa:

Mozilla Firefox, Chrome, Safari, Opera

Kolejną działającą nowością jest styl odpowiedzialny za określanie stopnia przezroczystości wybranego elementu. Przezroczystość możemy określić dla dowolnych elementów formatowanej strony. Warto mieć na uwadze to, że w odróżnieniu od modelu barw RGBA lub HSLA przezroczystość działa na wszystkie elementy występujące w formatowanym znaczniku. Innymi słowy, możemy na przykład określić stopień przezroczystości obrazka lub tekstu.

Przykładowe wykorzystanie stylu opacity może mieć następującą formę:

DIV

{

opacity:0.3;

font-weight:bolder;

color:blue;

}

Natomiast efekt działania opacity może wyglądać w sposób następujący. Zwróć uwagę na to, że przezroczystość odnosi się zarówno do tła, jak i koloru tekstu.

<<przykład>>

<div class="przyklad">

<div style="background-color:rgb(255,0,0);opacity:0;width:50px;height:50px;font-weight:bolder;color:blue;">0</div>

<div style="background-color:rgb(255,0,0);opacity:0.1;width:50px;height:50px;font-weight:bolder;color:blue;">0.1</div>

<div style="background-color:rgb(255,0,0);opacity:0.2;width:50px;height:50px;font-weight:bolder;color:blue;">0.2</div>

<div style="background-color:rgb(255,0,0);opacity:0.3;width:50px;height:50px;font-weight:bolder;color:blue;">0.3</div>

<div style="background-color:rgb(255,0,0);opacity:0.4;width:50px;height:50px;font-weight:bolder;color:blue;">0.4</div>

<div style="background-color:rgb(255,0,0);opacity:0.5;width:50px;height:50px;font-weight:bolder;color:blue;">0.5</div>

<div style="background-color:rgb(255,0,0);opacity:0.6;width:50px;height:50px;font-weight:bolder;color:blue;">0.6</div>

<div style="background-color:rgb(255,0,0);opacity:0.7;width:50px;height:50px;font-weight:bolder;color:blue;font-weight:bolder;color:blue;">0.7</div>

<div style="background-color:rgb(255,0,0);opacity:0.8;width:50px;height:50px;font-weight:bolder;color:blue;">0.8</div>

<div style="background-color:rgb(255,0,0);opacity:0.9;width:50px;height:50px;font-weight:bolder;color:blue;">0.9</div>

<div style="background-color:rgb(255,0,0);opacity:1;width:50px;height:50px;font-weight:bolder;color:blue;">1</div>

</div>

<</przykład>>

Opacity działa poprawnie w przeglądarkach Opera, Mozilla Firefox, Safari i Chrome. Natomiast posiadacze Internet Explorera muszą się zadowolić przykładem widocznym na rysunku 15.19.

Rysunek 15.19. Przykład działania opacity