Opacity

CSS vlastnost opacity určuje průhlednost prvků v Opeře, Firefoxu a ve Webkitu.

opacity
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.

Podpora

Opacity funguje v prohlížečích postavených na jádře Gecko (Firefox), Webkit (Chrome, Safari) a Opera. Nefunguje v Internet Exploreru.

Podpora vlastnosti -moz-opacity
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ří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>

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

Nestandardní 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.

Další možnosti poloprůhlednosti

Další možností poloprůhledných efektů jsou:

 

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.