Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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,