opacity

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