Непрозрачность

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

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

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

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

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

Синтаксис

Значения

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

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

<number>

Примеры

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

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/media/img/mdn-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' в этой спецификации.
Рекомендация Initial definition
Начальное значение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 Полная поддержка Да

Легенда

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

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