Свойство opacity: прозрачность группы
Чем прозрачность всего элемента отличается от полупрозрачного фонового цвета.
Как это работает
opacity управляет прозрачностью элемента вместе с его потомками как единой группы. Если задать 0.5 контейнеру, полупрозрачными станут и фон, и текст внутри. Вернуть полную непрозрачность ребёнку через opacity: 1 в такой группе не получится.
Если требуется прозрачный фон при обычном тексте, задайте альфа-канал самому background-color. Значение opacity меньше единицы создаёт контекст наложения. Полностью прозрачный элемент не обязательно перестаёт получать фокус или события указателя.
Пример в интерфейсе
.card { padding: 18px; margin: 10px 0; background: #11694e; color: white; }
.faded { opacity: .5; }
.alpha { background: rgb(17 105 78 / 50%); color: #142d23; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| 1 | Полная непрозрачность. |
| 0 | Полная прозрачность, но место в раскладке остаётся. |
| rgb(… / 50%) | Прозрачность конкретного цвета вместо всей группы. |
На что обратить внимание
Не скрывайте интерактивную панель только opacity: 0. Невидимые кнопки могут остаться доступными для клика и клавиатуры.
Проверьте на практике
Сравните две карточки: у первой прозрачна вся группа, у второй — только фон. Обратите внимание на читаемость текста.
Связанные темы: background, z-index.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.