Neprůhlednost - Triky CSS | Almanach CSS 2025

opacityVlastnost CSS určuje, jak průhledný prvek je.

Základní použití:

div ( opacity: 0.5; )

Neprůhlednost má výchozí počáteční hodnotu 1 (100% neprůhledná). Neprůhlednost se nedědí, ale proto, že rodič má neprůhlednost, která se vztahuje na všechno v ní. Bez nějakého triku nemůžete udělat podřízený prvek méně transparentním než nadřazený. Hodnoty jsou číslo od 0 do 1 představující opacitu kanálu („alfa“ kanál). Pokud má prvek hodnotu 0, je prvek zcela neviditelný; hodnota 1 je zcela neprůhledná (plná).

Podívejte se na toto pero!

Kompatibilita IE

Pokud chcete, aby neprůhlednost fungovala ve všech verzích IE, pořadí by mělo být následující:

.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; )

Pokud tuto objednávku nepoužíváte, IE8-as-IE7 neprůhlednost nepoužije, ačkoli IE8 a čistý IE7 ano.

Poznámka k kontextům stohování

Pokud je umístěn prvek sa opacityhodnotou menší než 1, použije se z-indexvlastnost, jak je popsáno v CSS2.1, kromě toho, že se s autohodnotou zachází jako s 0, protože se vždy vytvoří nový kontext skládání.

Jako alternativu k visibilityvlastnosti lze použít krytí : visibility: hidden;je jako opacity: 0;.