Прозрачные цвета

До сих пор все наши цвета были непрозрачными: сквозь них ничего не видно. Но цвет может быть и частично прозрачным. Тогда то, что находится позади, просвечивает сквозь него, как сквозь тонированное стекло.

Прозрачность задаёт четвёртое значение — альфа-канал (alpha). Это число от 0 (полностью прозрачный, невидимый) до 1 (полностью непрозрачный); его можно записать и в процентах, от 0% до 100%. Десятичные числа в CSS пишутся с точкой: 0.5. В RGB альфа — это четвёртое число, а функция тогда обычно называется rgba (a — от alpha):

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

Это наполовину прозрачный красный: половина того, что находится позади, просвечивает сквозь него. Альфа-канал могут иметь и другие форматы:

• В HSL это тоже четвёртое значение: hsla(0, 100%, 50%, 0.5).
• В hex это четвёртая пара символов, от 00 (прозрачный) до ff (непрозрачный): #ff000080 (80 = 128, примерно половина от 255).

Сегодня rgb и hsl тоже принимают альфа-канал, так что лишняя a больше не нужна. Вам может встретиться и более новая запись — с пробелами и косой чертой перед альфой: rgb(255 0 0 / 50%). Все эти варианты дают практически один и тот же наполовину прозрачный красный.

Прозрачный цвет полезен, когда нужна лёгкая подцветка, подходящая к окружающим цветам. Мы зададим блоку div с породами фон цвета наших заголовков с альфой 0.2: зелёный закроет лишь пятую часть, а остальное — светлый фон страницы, просвечивающий сквозь него.

Обратите внимание, что фон плотно облегает текст, который касается его краёв. В уроке о блочной модели мы научимся добавлять пространство внутри элемента.