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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"

(oba to synonimy)
4.0
filter: 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.0
filter: alpha(opacity=xx)
filter: "alpha(opacity=xx)"

(oba to synonimy)
4.0
filter: 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 do filter. 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.

Specyfikacje

Autorzy i etykiety dokumentu

Etykiety: 
Autorzy tej strony: teoli, gsc
Ostatnia aktualizacja: teoli,