Průhlednost prvku

Kromě průhledných barev má CSS i vlastnost opacity (neprůhlednost). Ta zprůhlední celý prvek se vším, co obsahuje: s jeho textem, pozadím i všemi prvky uvnitř. Její hodnotou je číslo od 0 (neviditelný) do 1 (úplně neprůhledný, výchozí hodnota):

h1 {
	opacity: 0.5;
}

Čím se liší od barvy s alfou? Alfa ovlivní jen tu jednu barvu, u které ji napíšeme. Porovnejte tyto dvě ukázky. První má purpurové pozadí s alfou 0.5 a bílý text, druhá má purpurové pozadí, bílý text a opacity: 0.5:

background-color: rgba(255, 0, 229, 0.5)

opacity: 0.5

V první ukázce je průhledné jen pozadí a text zůstal zářivě bílý. Ve druhé vybledl spolu s pozadím i text.

Když tedy chcete zprůhlednit jen pozadí (nebo jen text), použijte barvu s alfou. Když chcete zprůhlednit celý prvek, použijte opacity. Často se používá pro efekty s pseudotřídou :hover, kterou znáte z lekce o selektorech. Seznam plemen trochu ztlumíme a každé plemeno se rozsvítí naplno, když na něj najedete myší.