opacity

CSS-свойство opacity устанавливает непрозрачность элемента. Непрозрачность - это степень, в которой содержимое скрывается за элементом, является противоположностью прозрачности.

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> | (en-US) <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

Смотрите также