Что означают четыре значения
В записи rgba(40, 100, 160, 0.5) первые три числа задают красную, зелёную и синюю составляющие. Для привычной числовой записи каждый цветовой канал находится в диапазоне от 0 до 255. Последнее число — альфа-канал: здесь цвет имеет непрозрачность 50%.
Чем меньше альфа, тем сильнее виден фон под элементом. Значение 0 не означает белый цвет: оно означает, что этот цвет полностью прозрачен. Значение 1 оставляет исходный цвет непрозрачным. Поэтому одинаковая запись на белой и чёрной подложке выглядит по-разному.
В контексте веб-дизайна A означает Alpha. В описаниях некоторых осветительных приборов та же аббревиатура может использоваться иначе, например для дополнительного янтарного канала. Эта статья посвящена именно цветам на веб-страницах.
Как записать цвет в CSS
Классический вариант: background-color: rgba(40, 100, 160, 0.5);. Он задаёт полупрозрачный фон. Для текста используется свойство color, для цвета границы — border-color. Сам набор значений не определяет, какую часть элемента нужно окрасить: это делает свойство.
Современная запись того же цвета: rgb(40 100 160 / 50%). Компоненты разделены пробелами, альфа — косой чертой. Согласно документации MDN, rgba() является синонимом rgb(). Поэтому в новом коде можно использовать rgb() с альфа-компонентом.
Выберите один понятный стиль записи для проекта и используйте его последовательно. Не смешивайте разделители случайным образом. Если правило не применяется, сначала проверьте синтаксис, а уже затем ищите проблему в браузере.
Чем RGBA отличается от opacity
Альфа в цвете фона меняет только этот фон. Текст и вложенные элементы могут оставаться полностью непрозрачными. Это удобно для карточки поверх изображения: подложка пропускает часть картинки, а надпись сохраняет читаемость.
Свойство opacity: 0.5 применяется к элементу вместе с его содержимым. В результате бледнее становятся и фон, и текст, и иконки. Если цель — прозрачная подложка с чётким текстом, такая настройка обычно не соответствует задаче.
Непрозрачность родительского элемента нельзя отменить, просто установив дочернему opacity: 1. Родитель уже участвует в итоговом смешивании как целая группа. Правильнее изменить структуру оформления: например, отдельно задать полупрозрачный цвет фона.
Где полезна прозрачность
Первый сценарий — мягкая граница: border: 1px solid rgb(0 0 0 / 12%);. Она менее контрастна, чем сплошной чёрный контур. Но итоговый вид зависит от подложки, поэтому один и тот же цвет нужно проверить в светлой и тёмной теме.
Второй сценарий — затемнение изображения под заголовком. Полупрозрачная тёмная подложка помогает отделить текст от картинки. Не рассчитывайте, что одно значение альфа подходит для любых фотографий: светлый участок под текстом может потребовать другого решения.
Третий сценарий — тень или цветовая подсветка состояния. Прозрачность позволяет сделать их менее тяжёлыми. При этом состояние ошибки нельзя обозначать только слабой красной заливкой: добавьте понятный текст, чтобы смысл не зависел исключительно от различения цветов.
Если непонятно, какие изменения нужны в первую очередь, начните с диагностики. SEO-аудит сайта позволяет получить отчёт с выводами и таблицу технических и контентных задач.
Почему цвет выглядит не так
Проверьте подложку и родительские элементы. Полупрозрачный синий поверх жёлтого не выглядит так же, как поверх белого. Если поверх него наложен ещё один прозрачный слой, результат дополнительно изменится. Не сравнивайте такой фрагмент с непрозрачным образцом из макета.
Посмотрите вычисленные стили в инструментах разработчика. Другое CSS-правило может переопределять фон, а изображение или псевдоэлемент — закрывать его. Для диагностики временно сравните тот же цвет с альфа 1: это помогает отделить проблему цвета от проблемы наложения.
Не заменяйте прозрачность осветлением RGB-каналов без понимания эффекта. Более светлый непрозрачный цвет и полупрозрачный цвет совпадут только на определённом фоне. При смене темы или изображения различие станет заметным.
Как проверить результат
Смотрите на готовый элемент в реальном контексте, а не только на плашку цвета. Проверьте длинный текст, ссылки, состояние фокуса и соседние элементы. Для текста особенно важен контраст итогового отображения с подложкой, а не красивые исходные числа в редакторе.
Если прозрачность декоративная, убедитесь, что без неё интерфейс остаётся понятным. Если она помогает выделить действие, проверьте, не стала ли кнопка похожа на недоступную. Хорошая настройка цвета поддерживает смысл интерфейса, а не заставляет посетителя угадывать состояние элемента.
SEO-продвижение вашего сайта
Чтобы отдельные изменения работали на привлечение клиентов, объедините семантику, контент и технические задачи в общий план. На странице SEO-продвижения сайтов описаны состав работ и порядок сотрудничества.
Частые вопросы
Как сделать цвет полностью прозрачным?
Укажите альфа 0. При этом сам элемент, его размеры и интерактивность не исчезают автоматически.
Можно ли задавать альфа в процентах?
Да. Например, современная запись rgb(40 100 160 / 50%) задаёт непрозрачность 50%.
Почему текст стал прозрачным вместе с фоном?
Проверьте opacity на элементе и его родителях. Для прозрачности только фона используйте альфа-компонент цвета фона.
