Podsumowanie
Parametr opacity
ustala przezroczystość elementu, czyli stopień, w jakim są widoczne elementy za określonym elementem.
- Wartość początkowa: 1 (nieprzezroczysty)
- Dotyczy: wszystkie elementy
- Dziedziczone: nie
- Media:
visual
- Wartość obliczona: ustalona liczba (w zakresie [
0.0
,1.0
])
Składnia
opacity: number | inherit ;
Wartości
- 0 (lub mniej)
- Element jest w pełni przezroczysty (niewidoczny)
- 0 < liczba < 1
- Element jest półprzezroczysty (tło może być widoczne)
- 1 (lub więcej)
- Element jest w pełni nieprzezroczysty (jednolity)
Przykłady
hbox.example { opacity: 0.5; /* zobacz tło poprzez hbox */ }
Przykład kompatybilny z różnymi przeglądarkami
pre { /* make the box translucent (20% nieprzezroczystości) */ border: solid red; opacity: 0.2; filter: alpha(opacity=20); /* IE8 i starsze */ zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ }
pre { /* make the box translucent (50% nieprzezroczystości) */ border: solid red; opacity: 0.5; filter: alpha(opacity=50); /* IE8 i starsze */ zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ }
pre { /* make the box translucent (80% nieprzezroczystości) */ border: solid red; opacity: 0.8; filter: alpha(opacity=80); /* IE8 i starsze */ zoom: 1; /* set "zoom", "width" or "height" to trigger "hasLayout" in IE 7 and lower */ }
Różna nieprzezroczystość z :hover
<html> <head> <style> img.opacity { opacity: 1; filter: alpha(opacity=50); zoom: 1; } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=100); zoom: 1; } </style> </head> <body> <img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" /> </body> </html>
Kompatybilność z przeglądarkami
Element | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Podstawowe wsparcie | 1.0 | 1.0 (1.7 or earlier) | 9.0 | 9.0 | 1.2 (125) |
8.0filter: alpha(opacity=xx) (oba to synonimy) |
|||||
4.0filter: alpha(opacity=xx) |
Element | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Podstawowe wsparcie | 1.0 | 1.0 (1.7) | 9.0 | 9.0 | 3.2 |
8.0filter: alpha(opacity=xx) (oba to synonimy) |
|||||
4.0filter: alpha(opacity=xx) |
- Przed wersją 9, Internet Explorer nie wspierał
opacity
, zamiast tego należało używaćfilter
. - IE supports also the extended form
progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)
. This is needless, so don't use it. - IE8 wprowadził
-ms-filter
, jednak jest to synonim dofilter
. Nie używaj wersji z prefiksem. -moz-opacity
,-khtml-opacity
nie są wspierane od początku 2004 roku.
Konqueror zaczął wspieraćopacity
od wersji 4.0. Nie używaj więcej-khtml-opacity
ani-moz-opacity
.