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 Нет поддержки Нет

Легенда

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

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