---
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 &lt; liczba &lt; 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">&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
img.opacity {
   opacity: 1;
   filter: alpha(opacity=50);
   zoom: 1;
 }

img.opacity:hover {
   opacity: 0.5;
   filter: alpha(opacity=100);
   zoom: 1;
 }
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;img src="//developer.mozilla.org/media/img/mdn-logo.png" alt="MDN logo" width="128" height="146" class="opacity" /&gt;
&lt;/body&gt;
&lt;/html&gt;
</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>