Opacity
CSS vlastnost opacity určuje průhlednost prvků v Opeře, Firefoxu a ve Webkitu.
| hodnoty | průhlednost |
|---|---|
| 0 | zcela průhledný prvek (neviditelný) |
| 1 | zcela neprůhledný prvek |
| .5 | poloprůhledný prvek (hodnota je jenom příklad) |
| des. číslo | od nuly do jedničky, s desetinnou tečkou |
| x% | chybný zápis v procentech. Míra neprůhlednosti bývala podporovaná ve starších Mozillách |
Částečná průhlednost umožňuje zajímavé grafické efekty. V prohlížeči Internet Explorer se stejné poloprůhlednosti dá dosáhnout pomocí nestandardní vlastnosti filter s parametrem alpha.
Podpora
Opacity funguje v prohlížečích postavených na jádře Gecko (Firefox), Webkit (Chrome, Safari) a Opera. Nefunguje v Internet Exploreru.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| ne, ani ve verzi 8 | dá nahradit vlastností filter: alpha() | |
| Mozilla (Firefox, Netscape 6+ atd.) | od vezre 1.6 a Firefox 0,8 | podporuje správně desetinný zápis |
| WebKit (Chrome, Safari) | ano | |
| Opera | ano | |
| Konqueror | asi ne | -khtml-opacity: 0.5; |
| IE 5 / Mac | ne | |
| Netscape Navigator 4 | ne |
S poloprůhledností úzce souvisí obrázkový formát PNG (soubory s příponou .png). Ten totiž umí být poloprůhledný sám o sobě -- obsahuje věc, které se říká "alfa kanál", která určuje míru průhlednosti jednotlivých bodů obrázku.
Příklady
Příklad poloprůhledného prvku:
<div style="opacity: 0.5;">
poloprůhledný prvek
</div>
Aby poloprůhlednost fungovala i v Exploreru, je potřeba přidat zápis filtru alpha:
<div style="opacity: 0.5; filter:alpha (opacity=50)">
poloprůhledný prvek i v Exploreru
</div>
Příklad CSS vlastnosti opacity
Nestadardní varianty
Konqueror prý existuje podobná vlastnost -khtml-opacity se stejným zápisem, např.
-khtml-opacity: 0.5;
Ve starších Mozillách (do verze 1.6) existovala vlastnost -moz-opacity. Původně jsem tuto stránku vytvořil pro vlastnost -moz-opacity.
Reklama
