Průhledné barvy

Všechny naše barvy byly zatím neprůhledné: nic skrz ně nebylo vidět. Barva ale může být i částečně průhledná. Pak skrz ni prosvítá to, co je za ní, jako skrz barevné sklo.

Průhlednost určuje čtvrtá hodnota, které se říká alfa (alpha). Alfa je číslo od 0 (úplně průhledná, neviditelná barva) do 1 (úplně neprůhledná) a dá se zapsat i v procentech, od 0 % do 100 %. Desetinná čísla se v CSS píšou s tečkou, ne s čárkou: 0.5. V RGB je alfa čtvrté číslo a funkce se pak obvykle jmenuje rgba (a jako alfa):

p {
	background-color: rgba(255, 0, 0, 0.5);
}

To je napůl průhledná červená: polovina toho, co je za ní, prosvítá. Alfu mohou mít i ostatní zápisy:

• V HSL je to také čtvrtá hodnota: hsla(0, 100%, 50%, 0.5).
• V hexadecimálním zápisu je to čtvrtá dvojice znaků, od 00 (průhledná) do ff (neprůhledná): #ff000080 (80 = 128, zhruba polovina z 255).

Dnes alfu přijímají i funkce rgb a hsl, takže písmeno a navíc už není potřeba. Můžete se setkat i s novějším zápisem s mezerami a lomítkem před alfou: rgb(255 0 0 / 50%). Všechny tyto zápisy dávají prakticky stejnou napůl průhlednou červenou.

Průhledná barva se hodí pro jemný barevný nádech, který ladí s barvami kolem. Prvku div s plemeny dáme pozadí v zelené barvě nadpisů s alfou 0.2: zelená tak zabere jen pětinu a zbytek tvoří světlé pozadí stránky, které skrz ni prosvítá.

Všimněte si, že pozadí těsně obepíná text, který se dotýká jeho krajů. V lekci o box modelu se naučíme přidat dovnitř prvku volné místo.