opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

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

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

css

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

Синтаксис

Значения

<alpha-value>

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

Значение	Действие
`0`	Элемент полностью прозрачен (он становится невидимым).
Любое `число` строго между `0` и `1`	Элемент полупрозрачный (т.е. содержимое элемента можно увидеть).
`1` (значение по умолчанию)	Элемент полностью непрозрачный (видимый).

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

opacity = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <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)