CSS-свойство `opacity`

Свойство opacity CSS задаёт непрозрачность элемента. Непрозрачность — это степень, в которой содержимое за элементом скрыто; она противоположна прозрачности.

Попробуйте

opacity: 0;

opacity: 0.33;

opacity: 1;

<section class="default-example" id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  background-color: #963770;
  color: white;
  padding: 1em;
}

Синтаксис

opacity: 0.9;
opacity: 90%;

/* Global values */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;

Значения

<alpha-value>

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

Значение	Описание
0	Элемент полностью прозрачен (то есть невидим).
Любое <number> строго между 0 и 1	Элемент полупрозрачен (то есть сквозь него видно содержимое).
1 (значение по умолчанию)	Элемент полностью непрозрачен (визуально сплошной).

Описание

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

Чтобы изменить только непрозрачность фона, используйте свойство background со значением цвета, допускающим альфа-канал. Например:

background: rgb(0 0 0 / 40%);

Если для opacity задано значение 0, элемент и все его дочерние элементы становятся невидимыми, но они по-прежнему остаются частью DOM. Это означает, что они по-прежнему регистрируют события указателя, а если элементы входят в порядок обхода с помощью клавиши Tab, они получают фокус. Для удобства пользователей убедитесь, что такие элементы становятся видимыми при взаимодействии с ними, или используйте CSS-свойство pointer-events, чтобы отключить события указателя, а также исключите элемент из порядка обхода с помощью клавиши Tab, отключив его атрибут disabled или задав tab-index="-1" для интерактивных элементов, не связанных с формами.

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

Не следует использовать только непрозрачность, чтобы скрывать информацию от программ чтения с экрана. Используйте атрибут HTML hidden, свойство CSS visibility или свойство CSS display. Лучше не использовать атрибут aria-hidden, но если элемент скрыт с помощью непрозрачности, его также следует скрыть от программ чтения с экрана.

Переходы непрозрачности

Если вы добавляете на страницу элементы, содержимое которых ранее было скрыто с помощью visibility: hidden, display: none или content-visibility: hidden, и задаёте для них переход непрозрачности, необходимо включить и @starting-style, и transition-behavior: allow-discrete:

.card {
  transition:
    opacity 5s,
    display 5s;
  background-color: orange;

  transition-behavior: allow-discrete;
  @starting-style {
    opacity: 0;
  }
}

.card.hidden {
  display: none;
  opacity: 0;
}

Для переходов при первом применении стилей нужны правила @starting-style. В приведённом выше коде установка opacity: 0 в @starting-style задаёт начальное состояние перехода, когда элемент получает первое обновление стилей. Подробнее см. в разделе @starting-style.

Чтобы выполнить переход к display: none, необходимо задать transition-behavior: allow-discrete. Подробнее см. описание свойства transition-behavior.

Доступность

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

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

• WebAIM: проверка контрастности цветов
• MDN: пояснения к рекомендации 1.4 WCAG

• [Понимание критерия успеха 1.4.3

  W3C: понимание WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)

В различных операционных системах есть настройка уменьшения прозрачности. Чтобы задавать opacity с учётом предпочтений пользователя относительно прозрачности в операционной системе, используйте медиазапрос prefers-reduced-transparency.

Формальное определение

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

opacity = 
  <opacity-value>

<opacity-value> = 
  <number> |
  <percentage>

Примеры

Задание непрозрачности

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

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>

CSS

div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.light {
  opacity: 0.2; /* Barely see the text over the background */
}
.medium {
  opacity: 0.5; /* See the text more clearly over the background */
}
.heavy {
  opacity: 0.9; /* See the text very clearly over the background */
}

Результат

Задание непрозрачности при наведении

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

HTML

<div class="wrapper">
  <img
    src="/shared-assets/images/examples/dino.svg"
    alt="MDN Dino"
    width="128"
    height="146"
    class="opacity" />
</div>

CSS

img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    rgb(255 255 255 / 50%) 50%
  );
  background-size: 20px 20px;
}

Результат

Стилизация с учётом предпочтений пользователя

Чтобы стилизовать элементы с учётом предпочтений пользователя относительно прозрачности в операционной системе, используйте медиазапрос prefers-reduced-transparency. В следующем примере показано, как использовать медиазапрос prefers-color-scheme, чтобы задать желаемое opacity с учётом предпочтений пользователя.

.element {
  opacity: 0.5;
}

@media (prefers-reduced-transparency) {
  .element {
    opacity: 1;
  }
}

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

Совместимость с браузерами

См. также

• prefers-reduced-transparency медиазапрос
• модуль CSS color
• атрибут opacity SVG