#1 Průhlednost
Průhlednost, anglicky opacity, stejnojmenně i CSS vlastnost – opacity, je vlastnost, která určuje průhlednost (transparentnost) prvku.
Vlastnost opacity může nabývat číselné hodnoty od 0 do 1, včetně desetinných čísel, kde 0 značí 100% průhlednost, tedy prvek není vidět, 0.5 50% průhlednost a 1 0% procentní průhlednost – prvek je plně vidět.
div {
opacity: 0.3;
}
Průhlednost, která je definována vlastností opacity se aplikuje na daný prvek a všechny prvky, které se v něm nacházejí! V následujícím příkladu bude mít 50% průhlednost jak text, tak odkaz a obrázek, i když je průhlednost definována rodičovskému prvku.
<div>
<p>Odstavec textu</p>
<a href="index.html">Odkaz na hlavní stránku!</a>
<img src="img/obrazek.jpg"<
</div>
div {
opacity: 0.5;
}
#2 Průhlednost barev
Chcete-li aplikovat průhlednost pouze na barvu textu nebo pozadí, lze k tomu použít formát barvy, který podporuje průhlednost, jako je například RGBA. S pomocí RGBA lze nastavit jakoukoli barvu a dát ji také průhlednost, díky čemuž se průhlednost aplikuje pouze na prvky, kterým je tato barva definovaná – nepřenáší se na ostatní, vnořené prvky.
p {
color: rgba(154, 177, 0, .5);
}