--- title: opacity slug: Web/CSS/opacity tags: - CSS - CSS Property - Reference translation_of: Web/CSS/opacity --- <div>{{ CSSRef() }}</div> <h2 id="Podsumowanie">Podsumowanie</h2> <p>Parametr<code> opacity</code> ustala przezroczystość elementu, czyli stopień, w jakim są widoczne elementy za określonym elementem.</p> <ul> <li><span class="lang lang-en">Wartość początkowa: 1 (nieprzezroczysty)</span></li> <li>Dotyczy: wszystkie elementy</li> <li><span class="lang lang-en">Dziedziczone: nie</span></li> <li>Media: <span class="lang lang-en"> <code><a href="../../en/CSS/Media/Visual" rel="custom">visual</a></code> </span></li> <li><span class="lang lang-en">Wartość obliczona</span>: ustalona liczba (w zakresie [<code>0.0</code>, <code>1.0</code>])</li> </ul> <h2 id="Składnia">Składnia</h2> <pre class="eval">opacity: <em>number</em> | inherit ; </pre> <h3 id="Warto.C5.9Bci" name="Warto.C5.9Bci">Wartości</h3> <dl> <dt>0 (lub mniej)</dt> <dd>Element jest w pełni przezroczysty (niewidoczny)</dd> <dt>0 < liczba < 1</dt> <dd>Element jest półprzezroczysty (tło może być widoczne)</dd> <dt>1 (lub więcej)</dt> <dd>Element jest w pełni nieprzezroczysty (jednolity)</dd> </dl> <h2 id="Przyk.C5.82ady" name="Przyk.C5.82ady">Przykłady</h2> <pre>hbox.example { opacity: 0.5; /* zobacz tło poprzez hbox */ } </pre> <h4 id="Przykład_kompatybilny_z_różnymi_przeglądarkami">Przykład kompatybilny z różnymi przeglądarkami</h4> <pre style="">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> <pre style="">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> <pre style="">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 */ } </pre> <h4 id="Różna_nieprzezroczystość_z_hover">Różna nieprzezroczystość z :hover</h4> <pre class="deki-transform"><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> </pre> <h2 id="Browser_Compatibility" name="Browser_Compatibility">Kompatybilność z przeglądarkami</h2> <p>{{ CompatibilityTable() }}</p> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Element</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td rowspan="3">Podstawowe wsparcie</td> <td rowspan="3">1.0</td> <td rowspan="3">{{ CompatGeckoDesktop("1.7") }}</td> <td>9.0</td> <td rowspan="3">9.0</td> <td rowspan="3">1.2 (125)</td> </tr> <tr> <td>8.0<br> <code>filter: alpha(opacity=xx)<br> filter: "alpha(opacity=xx)" </code><br> (oba to synonimy)</td> </tr> <tr> <td>4.0<br> <code>filter: alpha(opacity=xx)</code></td> </tr> </tbody> </table> </div> <div id="compat-mobile"> <table class="compat-table" style="height: 156px; width: 827px;"> <tbody> <tr> <th>Element</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td rowspan="3">Podstawowe wsparcie</td> <td rowspan="3">1.0</td> <td rowspan="3">{{ CompatGeckoMobile("1.7") }}</td> <td>9.0</td> <td rowspan="3">9.0</td> <td rowspan="3">3.2</td> </tr> <tr> <td>8.0<br> <code>filter: alpha(opacity=xx)<br> filter: "alpha(opacity=xx)" </code><br> (oba to synonimy)</td> </tr> <tr> <td>4.0<br> <code>filter: alpha(opacity=xx)</code></td> </tr> </tbody> </table> </div> <ul> <li>Przed wersją 9, Internet Explorer nie wspierał <code>opacity</code>, zamiast tego należało używać <code>filter</code>.</li> <li>IE supports also the extended form <code>progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)</code>. This is needless, so don't use it.</li> <li>IE8 wprowadził <code>-ms-filter</code>, jednak jest to synonim do <code>filter</code>. Nie używaj wersji z prefiksem.</li> <li><code>-moz-opacity</code>, <code>-khtml-opacity</code> nie są wspierane od początku 2004 roku.<br> Konqueror zaczął wspierać <code>opacity</code> od wersji 4.0. Nie używaj więcej <code>-khtml-opacity</code> ani <code>-moz-opacity</code>.</li> </ul> <h2 id="Specyfikacje">Specyfikacje</h2> <ul> <li>{{ spec("http://www.w3.org/TR/css3-color/#transparency","CSS 3 Color: opacity", "REC") }}</li> </ul>