Непрозрачность и прозрачность RGBA

Свойство opacity задаёт прозрачность всего элемента, включая его дочерние элементы и содержимое. Значения находятся в диапазоне от 0 (полностью прозрачно) до 1 (полностью непрозрачно).

Важно учитывать: opacity влияет на всё дерево элемента. Текст, изображения и дочерние элементы внутри элемента с opacity: 0.5 становятся прозрачными на 50% — дочерний элемент не может быть более непрозрачным, чем его родитель.

Чтобы сделать прозрачным только цвет фона, не затрагивая текст и дочерние элементы, используйте rgba() вместо opacity:

Запомните это следующим образом:

• opacity: 0.5 — весь элемент и его дочерние элементы становятся прозрачными
• rgba(r,g,b,0.5) — прозрачным становится только значение цвета, дочерние элементы не затрагиваются

Тот же принцип действует для hsla(). Четвёртый аргумент — это альфа-канал (0–1):

Современный CSS позволяет использовать разделитель в виде косой черты для альфа-канала в rgb() и hsl() без варианта с буквой «a»:

Все три значения скрывают элементы, но делают это по-разному:

• opacity: 0 — элемент невидим, но продолжает занимать место и остаётся доступным для нажатия
• visibility: hidden — элемент невидим, занимает место, но недоступен для нажатия
• display: none — элемент полностью удаляется из раскладки

Поскольку opacity обрабатывается на GPU, это одно из самых дешёвых для анимации свойств CSS. Для эффектов появления и исчезновения всегда используйте переходы opacity, а не background-color.

Чтобы сделать фон элемента полупрозрачным, сохранив текст полностью разборчивым, используйте rgba() для свойства background-color:

Используйте RGBA в border-color и box-shadow, чтобы создавать лёгкие прозрачные эффекты:

Текст с низкой непрозрачностью хуже читается и может не соответствовать требованиям WCAG к контрастности цветов. Всегда проверяйте коэффициенты контрастности при использовании прозрачности для текста. Для обычного текста обеспечьте минимальный коэффициент 4.5:1.

opacity делает весь элемент и его дочерние элементы прозрачными. Используйте rgba() или hsla() для создания прозрачных цветов, не затрагивая дочерние элементы. Переходы opacity ускоряются с помощью GPU и работают эффективно. Всегда проверяйте коэффициенты контрастности при использовании прозрачности для текста.