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> | <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число

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
opacityChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1
Полная поддержка 1
Нет поддержки 1 — 3.5
С префиксом
С префиксом Требует вендорный префикс: -moz-
IE Полная поддержка 9Opera Полная поддержка 9Safari Полная поддержка 2
Полная поддержка 2
Нет поддержки 1.1 — 2
С префиксом
С префиксом Требует вендорный префикс: -khtml-
WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
Support for percentage opacity valuesChrome Полная поддержка 78Edge Полная поддержка 79Firefox Полная поддержка 70IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Полная поддержка 78Chrome Android Полная поддержка 78Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 12.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Требует вендорный префикс или другое имя для использования.
Требует вендорный префикс или другое имя для использования.

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