Opacity

CSS vlastnost opacity určuje průhlednost prvků. Typicky se používá pro poloprůhlednost v situacích, kdy se prvky stránky překrývají nebo graficky doplňují.

opacity
hodnoty průhlednost
0 zcela průhledný prvek (neviditelný)
1 zcela neprůhledný prvek
0.5 poloprůhledný prvek (hodnota je jenom příklad)
des. číslo od nuly do jedničky, s desetinnou tečkou, např. 0.25
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.

Pokud chcete mít poloprůhlednou pouze běžnou barvu nějakého prvku, stačí na to poloprůhledná barva. Poloprůhledná barva se zapisuje notací rgbA. Potom se zadává do vlastnosti background-color. Stejně tak poloprůhledné gradienty se dělají pomocí background-image s využitím gradientů. Proč to zmiňuji: protože je potřeba použít RGBA, pokud má být poloprůhledné pouze pozadí. Nic jako background-opacity neexistuje.

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 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) od verze 1.6 a Firefox 0,8 podporuje správně desetinný zápis
WebKit (Chrome, Safari) ano  

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

Další možnosti poloprůhlednosti

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

 

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
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.