opacity

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

Интерактивный пример

opacity применяется к элементу в целом, включая его содержимое, даже если значение не наследуется дочерними элементами. Таким образом, элемент и его потомки имеют одинаковую непрозрачность относительно фона элемента, даже если они имеют различную непрозрачность относительно друг друга.

Использование opacity со значением, отличным от 1, помещает элемент в новый контекст наложения (en-US).

Если вы не хотите применять opacity к дочерним элементам, используйте взамен свойство background. Например:

css

background: rgba(0, 0, 0, 0.4);

Синтаксис

Значения

<alpha-value>

: `число` в пределах от `0.0` до `1.0`, включительно, или `проценты` в пределах от `0%` до `100%`, включительно, представляет непрозрачность канала (т.е. значение его альфа-канала). Любое значение вне интервала, хотя и является валидным, округляется до ближайшего предела в диапазоне.	Значение	Действие
`0`	Элемент полностью прозрачен (он становится невидимым).
Любое `число` строго между `0` и `1`	Элемент полупрозрачный (т.е. содержимое элемента можно увидеть).
`1` (значение по умолчанию)	Элемент полностью непрозрачный (видимый).

Формальный синтаксис

opacity = 
  <alpha-value>  

<alpha-value> = 
  <number>      | (en-US)
  <percentage>

Примеры

Базовый пример

css

div { background-color: yellow; }
.light {
  opacity: 0.2; /* Едва видимый текст на фоне */
}
.medium {
  opacity: 0.5; /* Видимость текста более чёткая на фоне */
}
.heavy {
  opacity: 0.9; /* Видимость текста очень чёткая на фоне */
}

html

<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`

css

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;
}

html

<img src="https://developer.mozilla.org/mdn-social-share.png"
  alt="MDN logo" width="128" height="146"
  class="opacity">

Проблемы доступности

Если непрозрачность текста регулируется, важно убедиться, что коэффициент контрастности между цветом текста и фоном, на котором размещён текст, достаточно высок, чтобы люди, испытывающие проблемы со слабым зрением, могли читать содержимое страницы.

Коэффициент цветовой контрастности определяется путём сравнения яркости текста с откорректированной непрозрачностью и значением цвета фона. Чтобы соответствовать действующим Рекомендациям по доступности веб-контента (WCAG), для текстового содержимого требуется соотношение 4.5:1 и 3:1 для более крупного текста, такого как заголовки. Большой текст определяется как 18.66px и жирный или крупнее, или 24px или выше.

Спецификации

Specification
CSS Color Module Level 4 # transparency

Начальное значение	`1`
Применяется к	все элементы
Наследуется	нет
Проценты	map to the range `[0,1]`
Обработка значения	Тоже, что и указанное значение, после обрезки `number` до диапозона [0.0, 1.0].
Animation type	by computed value type

Поддержка браузерами

BCD tables only load in the browser

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

Microsoft's filter:alpha(opacity=xx)