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-opacitynie są wspierane od początku 2004 roku.
Konqueror zaczął wspieraćopacityod wersji 4.0. Nie używaj więcej-khtml-opacityani-moz-opacity.