CSS opacity — синтаксис и примеры
CSS-свойство opacity: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Практический смысл
В материале о «opacity» основное внимание уделено области «цвет и отрисовка». Свойство opacity относится к области «цвет и отрисовка» и применяется на этапе отрисовки после расчёта геометрии и может создавать дополнительные слои. Проверяйте поведение «opacity» в сетке с карточками разной высоты, причём меняйте только одно условие за запуск.
Перед применением «opacity» сформулируйте ожидаемое поведение, затем проверьте вычисленное значение opacity, наследование и контекст родителя. Для «opacity» такое сравнение показывает реальную причину изменения.
Синтаксис opacity
Синтаксис «opacity» показан на минимальном фрагменте без внешнего фреймворка. Сначала запустите исходный вариант, затем меняйте отмеченную часть.
.demo {
opacity: .85;
}Как работает opacity
Чтобы объяснить работу «opacity», проследите путь от структуры и входного значения до отображения или поведения. Свойство opacity относится к области «цвет и отрисовка» и применяется на этапе отрисовки после расчёта геометрии и может создавать дополнительные слои. Контрольная точка для «opacity» — отображение в режиме печати.
Проверка в проекте
- Проверьте вычисленное значение opacity, наследование и контекст родителя; результат относится непосредственно к «opacity».
- Включить направление rtl и проверить логические стороны раскладки при разборе «opacity».
- Проверьте «opacity» в сетке с карточками разной высоты через порядок фокуса в дереве доступности и запишите наблюдаемое изменение.
Критерий выбора «opacity» — предсказуемая работа в заявленном контексте. Для «opacity» подтвердите её через порядок фокуса в дереве доступности и соблюдите ограничение: меняйте только одно условие за запуск.
Практика с opacity
Перенесите «opacity» в изолированном демо и испытайте его в сетке с карточками разной высоты. Сначала воспроизведите правильный результат, затем намеренно добавьте риск для «opacity»: изолированная декларация opacity без связанных ограничений может дать другой результат в реальном компоненте.
Сценарий: в сетке с карточками разной высоты.
Ошибки при работе с opacity
Контекст
Изолированная декларация opacity без связанных ограничений может дать другой результат в реальном компоненте — это предметный риск для «opacity».
Устойчивость
Использование физической стороны там, где нужен логический отступ при использовании «opacity».
Доступность
Подмена семантики визуально похожим div или span; для «opacity» проверьте это отдельно.
Поддержка opacity
Для «opacity» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «opacity»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1, источник 2.
Вопросы о opacity
Как понять, что «opacity» выбрано правильно?
«opacity» выбрано правильно, когда оно решает задачу «определять визуальный слой элемента без изменения смысловой структуры документа», сохраняет результат в сетке с карточками разной высоты и проходит предметную проверку: проверьте вычисленное значение opacity, наследование и контекст родителя.
Нужен ли запасной вариант для «opacity»?
Запасной вариант для «opacity» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «opacity» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.