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

<alpha-value>

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

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

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

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

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

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

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

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

При анимации непрозрачности элементов, которые вы добавляете на страницу, когда ранее содержимое было скрыто с помощью visibility: hidden, display: none или content-visibility: hidden, вам необходимо включить как @starting-style, так и transition-behaviour: 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 обеспечивает отправную точку для анимации, когда элемент получает обновление стиля.

Установка transition-behavior: allow-discrete требуется для перехода к display: none. Подробнее см. свойство transition-behavior.

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

Коэффициент контрастности цвета определяется путем сравнения яркости значений цвета текста и фона с учетом непрозрачности. Для соответствия текущим Руководству по доступности веб-контента (WCAG) требуется коэффициент 4,5:1 для текстового содержимого и 3:1 для крупного текста, например, заголовков. Крупный текст определяется как 18,66 пикселей и жирный или больше, или 24 пикселя или больше.

• WebAIM: Проверка контрастности цветов
• MDN Понимание WCAG, объяснения Руководства 1.4
• Понимание Критерия успеха 1.4.3 | W3C Понимание WCAG 2.0

Различные операционные системы предоставляют возможность уменьшения прозрачности. Для установки 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="//interactive-examples.mdn.mozilla.net/media/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 media query. Следующий пример демонстрирует, как использовать средство prefers-color-scheme media query для указания требуемой opacity на основе предпочтений пользователя.

.element {
  opacity: 0.5;
}

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

• prefers-reduced-transparency медиа запрос
• Модуль CSS цвета