diff options
Diffstat (limited to 'files/pl/web/css/opacity/index.html')
| -rw-r--r-- | files/pl/web/css/opacity/index.html | 180 |
1 files changed, 180 insertions, 0 deletions
diff --git a/files/pl/web/css/opacity/index.html b/files/pl/web/css/opacity/index.html new file mode 100644 index 0000000000..9b3e1504ff --- /dev/null +++ b/files/pl/web/css/opacity/index.html @@ -0,0 +1,180 @@ +--- +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> |