CSS-свойство opacity
устанавливает непрозрачность элемента. Непрозрачность - это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
opacity
применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.
Использование opacity
со значением, отличным от 1
, помещает элемент в новый контекст наложения.
Если вы не хотите применять opacity к дочерним элементам, используйте взамен свойство background
. Например:
background: rgba(0, 0, 0, 0.4);
Синтаксис
Значения
<alpha-value>
число
в пределах от0.0
до1.0
, включительно, илипроценты
в пределах от0%
до100%
, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.Значение Действие 0
Элемент полностью прозрачен (он становится невидимым). Любое число
строго между0
и1
Элемент полупрозрачный (т.е. содержимое элемента можно увидеть). 1
(значение по умолчанию)Элемент полностью непрозрачный (видимый).
Формальный синтаксис
<alpha-value>где
<alpha-value> = <number> | <percentage>
Примеры
Базовый пример
div { background-color: yellow; }
.light {
opacity: 0.2; /* Едва видимый текст на фоне */
}
.medium {
opacity: 0.5; /* Видимость текста более четкая на фоне */
}
.heavy {
opacity: 0.9; /* Видимость текста очень четкая на фоне */
}
<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>
Различная непрозрачность с :hover
img.opacity {
opacity: 1;
filter: alpha(opacity=100); /* IE8 и ниже */
zoom: 1; /* Триггеры "hasLayout" в IE 7 и ниже */
}
img.opacity:hover {
opacity: 0.5;
filter: alpha(opacity=50);
zoom: 1;
}
<img src="//developer.mozilla.org/static/img/opengraph-logo.png"
alt="MDN logo" width="128" height="146"
class="opacity">
Проблемы доступности
Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещен текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.
Коэффициент цветовой контрастности определяется путем сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.
Спецификации
Спецификация | Статус | Комментарий |
---|---|---|
CSS Transitions Определение 'opacity' в этой спецификации. |
Рабочий черновик | Определяет opacity как анимированную. |
CSS Color Module Level 3 Определение 'opacity' в этой спецификации. |
Рекомендация | Первоначальное определение |
Начальное значение | 1.0 |
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | указанное значение, обрезается до диапозона [0,1] |
Animation type | число |
Поддержка браузерами
BCD tables only load in the browser