Kurs języka HTML i CSS

Poradnik webmastera

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

Przezroczystość

Email Drukuj PDF

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

 

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