Nepriehľadnosť - Triky CSS | Almanach CSS 2025

opacityVlastnosť CSS určuje, ako priehľadný prvok je.

Základné použitie:

div ( opacity: 0.5; )

Nepriehľadnosť má predvolenú počiatočnú hodnotu 1 (100% nepriehľadná). Nepriehľadnosť sa nededí, ale preto, že rodič má nepriehľadnosť, ktorá sa vzťahuje na všetko v nej. Bez trochy podvádzania nemôžete urobiť detský prvok menej transparentným ako rodič. Hodnoty sú číslo od 0 do 1, ktoré predstavuje nepriehľadnosť kanála („alfa“ kanál). Ak má prvok hodnotu 0, je úplne neviditeľný; hodnota 1 je úplne nepriehľadná (plná).

Vyskúšajte toto pero!

Kompatibilita IE

Ak chcete, aby nepriehľadnosť fungovala vo všetkých verziách IE, malo by to byť nasledujúce:

.opaque ( /* Theoretically for IE 8 & 9 (more valid) */ /*… but not required as filter works too */ /* should come BEFORE filter */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE8 /* This works in IE 8 & 9 too */ /*… but also 5, 6, 7 */ filter: alpha(opacity=50); // IE 5-7 /* Modern Browsers */ opacity: 0.5; )

Pokiaľ toto poradie nepoužívate, IE8-as-IE7 nepriehľadnosť neaplikuje, aj keď IE8 a čistý IE7 áno.

Poznámka k kontextom skladania

Ak je umiestnený prvok s opacityhodnotou menšou ako 1, z-indexvlastnosť sa použije tak, ako je popísané v CSS2.1, s tou výnimkou, že s touto autohodnotou sa zaobchádza ako s 0, pretože sa vždy vytvorí nový kontext stohovania.

Nepriehľadnosť možno použiť ako alternatívu k visibilityvlastnosti: visibility: hidden;je ako opacity: 0;.