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