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. Pokud chcete mít poloprůhlednou pouze běžnou barvu nějakého prvku, stačí na to rgbA zápis vlastnosti background-color.
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 |
---|---|---|
Internet Explorer | až ve verzi 9, ani IE 8 opacity neumí | dá v IE 6, 7 a 8 nahradit vlastností filter: alpha() |
Mozilla (Firefox, Netscape 6+ atd.) | od verze 1.6 a Firefox 0,8 | podporuje správně desetinný zápis |
WebKit (Chrome, Safari) | ano | |
Opera | ano | |
Konqueror | jak ve které | -khtml-opacity: 0.5; |
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ří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>
To jsem zvědavý, jak se to bude hackovat v Internet Exploreru 9, který bude podporovat opacity. Bojím se, aby IE 9 nenásobil průhlednost z obou vlastností opacity a z alpha -- kdyby to násobil, byl by prvek příliš průhledný.
Příklad CSS vlastnosti opacity
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.
Další možností poloprůhledných efektů jsou:
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.