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í.
| 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.
| 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:
- poloprůhledný PNG obrázek (musí se mu nastavit alpha kanál)
- zadávání barev v RGBA(250,128,0.5), kde A s hodnotou 0.5 znamená poloprůhlednost
- použít klíčové slovo "transparent" místo názvu barvy u gradientu vlastnosti background-image.
- jako hodnotu pro background-image zadat gradient s poloprůhlednou barvou
- CSS vlastnost mask-image umí stylovaný objekt vynásobit alpha kanálem zadaného obrázku
Reklama
