Один и тот же цвет в CSS можно записать тремя способами: HEX-кодом (#ff0000), функцией rgb() с тремя числами или функцией rgba() с четвёртым числом - альфа-каналом для прозрачности. Визуально результат одинаковый, разница только в удобстве записи и в том, нужна ли прозрачность.
В этом уроке
Попробуй прямо сейчас: смени альфа-канал у .rgba-box (последнее число в rgba) на 0.1 и на 1 - сравни с тем, что происходит у .opacity-box при том же изменении.
HEX и RGB: одна и та же запись цвета по-разному
HEX-код (#rrggbb) и функция rgb() описывают один и тот же цвет двумя разными способами: HEX - это компактная шестнадцатеричная запись трёх чисел от 0 до 255 подряд, а rgb() - те же три числа явно, через запятую. #ff0000 и rgb(255, 0, 0) - это один и тот же красный, браузер понимает оба варианта одинаково.
background-color: #1e90ff; и background-color: rgb(30, 144, 255); - дают абсолютно одинаковый синий цвет.
rgb(30, 144, 255, 255) - четвёртое число здесь не альфа-канал 0-255, а именно rgb() без прозрачности принимает только три числа.
RGBA и прозрачность: альфа-канал от 0 до 1
rgba() добавляет к тем же трём числам четвёртое - альфа-канал, число от 0 (полностью прозрачно) до 1 (полностью непрозрачно). rgba(255, 0, 0, 0.5) - тот же красный, что и rgb(255, 0, 0), но видный наполовину прозрачным, сквозь него будет проглядывать то, что находится позади.
background-color: rgba(255, 0, 0, 0.3); - лёгкая красная подложка, сквозь которую хорошо виден фон позади.
background-color: rgba(255, 0, 0, 50); - альфа-канал больше 1 просто обрежется до 1 (полностью непрозрачно), а не станет "более насыщенным" красным.
Чем rgba отличается от opacity
Оба свойства делают что-то "прозрачным", но по-разному. rgba() в background-color влияет только на сам цвет фона - текст и остальное содержимое внутри элемента остаются полностью чёткими. А свойство opacity делает прозрачным ВЕСЬ элемент целиком, включая текст, картинки и всех его детей - если нужно притушить только фон, а не текст поверх него, opacity для этого не подходит.
background-color: rgba(0, 0, 0, 0.6); - фон затемнён, текст поверх него остаётся чётким и читаемым.
background-color: black; opacity: 0.6; - вместе с фоном "тускнеет" и весь текст внутри блока, читаемость падает.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Путают порядок значений в rgba() и ставят альфа-канал не последним | Браузер читает числа по порядку - "красный, зелёный, синий, альфа" - и получится совсем не тот цвет | Альфа-канал всегда идёт четвёртым, последним значением в rgba() |
| Указывают альфа-канал больше 1, ожидая "более насыщенный" непрозрачный цвет | Значение просто ограничивается (clamp) до 1 - визуально ничего сверх полной непрозрачности не происходит | Альфа-канал - число строго от 0 до 1 включительно |
| Используют opacity, когда на самом деле нужно было притушить только фон | Вместе с фоном становится полупрозрачным и текст внутри - читаемость падает | Для прозрачности только фона использовать rgba() именно в background-color |
| Пытаются задать прозрачность в обычном 6-значном HEX (#ff0000), не находя в нём места для альфы | Обычный 6-значный HEX всегда полностью непрозрачен - в нём нет места под альфа-канал | Использовать 8-значный HEX (#ff0000ff) или перейти на rgba() |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Сплошной цвет (HEX) | background-color: #ff0000; |
| Тот же цвет (RGB) | background-color: rgb(255, 0, 0); |
| Полупрозрачный цвет | background-color: rgba(255, 0, 0, 0.5); |
| Полностью прозрачный | background-color: rgba(255, 0, 0, 0); |
| Полностью непрозрачный (то же, что rgb) | background-color: rgba(255, 0, 0, 1); |
| Притушить только фон, не текст | rgba() в background-color, а не opacity на элементе |
Коротко: отвечаем на вопросы
Как лучше указывать цвет - в hex или в rgb?
Разницы в результате нет - это просто две записи одного и того же цвета. HEX короче и удобнее для готовых сплошных цветов (например скопированных из дизайн-макета), а rgb()/rgba() нужны, когда важно явно видеть отдельные числа каналов или требуется прозрачность.
В чём разница между opacity и rgba, если оба вроде бы делают элемент прозрачным?
rgba() в background-color делает прозрачным только сам цвет фона - текст и другое содержимое внутри остаются чёткими. opacity делает прозрачным весь элемент целиком, включая текст и всех его детей. Если нужно притушить только фон, а не то, что на нём написано - нужен именно rgba(), а не opacity.
