Исполняемые доки CSS: Прозрачность opacity

Q: Что делает opacity в CSS?

Задает, насколько элемент прозрачен, от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Действует на весь элемент, включая текст, рамку, изображения и все дочерние элементы, как на один сведенный слой.

Q: Как сделать прозрачным только фон, а не текст?

Не трогайте opacity и задайте фону цвет с альфой: background-color: rgb(37 99 235 / 0.5); или rgba(37, 99, 235, 0.5). Текст и дочерние элементы остаются полностью непрозрачными.

Q: Может ли дочерний элемент быть непрозрачнее родителя?

Нет. Opacity родителя применяется ко всей группе, поэтому opacity: 1 у дочернего элемента ее не отменит. Дочерний элемент родителя с 0.5 рисуется максимум с половинной непрозрачностью. Перенесите прозрачность в цвет фона родителя.

Q: Чем отличаются opacity: 0, visibility: hidden и display: none?

opacity: 0 скрывает элемент, но он по-прежнему занимает место, на него можно кликнуть, и его читают программы чтения с экрана. visibility: hidden сохраняет место, но на элемент нельзя кликнуть и его не читают. display: none полностью убирает его из раскладки.

Q: Можно ли задавать opacity в процентах?

Да. opacity: 50% то же самое, что opacity: 0.5, во всех актуальных браузерах. Значения меньше 0 или больше 1 приводятся к этому диапазону.

Что делает opacity

opacity задает, насколько элемент прозрачен: 1 это сплошной (по умолчанию), 0 невидимый, а все промежуточное позволяет фону просвечивать. Блоки ниже стоят на полосатом фоне, чтобы это было видно:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

Последний блок никуда не делся: он занимает свое место 90px в строке, просто ничего не рисует. Обратите внимание, что белые цифры бледнеют вместе со своими блоками. opacity действует на элемент и все, что внутри него.

Прозрачный фон, непрозрачный текст

Раз opacity делает бледными и дочерние элементы, это неподходящий инструмент для «полупрозрачного фона за читаемым текстом». Используйте цвет фона с альфа-каналом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

Обе белые панели пропускают полосы одинаково. В первой текст бледнеет вместе с панелью. Во второй прозрачен только цвет фона (rgb(255 255 255 / 0.6), то же, что rgba(255, 255, 255, 0.6)), поэтому текст остается сплошным и легко читается. Цвета с альфой разобраны на странице про цвета.

Дочерний элемент не может выйти из-под opacity родителя: opacity: 1 у дочернего элемента ничего не делает, потому что родитель рисуется одним бледным слоем, в котором дочерний элемент уже находится.

Значения

Значение	Результат
`1` или `100%`	полностью непрозрачный (по умолчанию)
`0.5` или `50%`	наполовину прозрачный
`0` или `0%`	полностью прозрачный, но остается в раскладке и кликабелен
`1.5`, `-1`	приводятся к `1` и `0`

Прозрачность наследуется визуально, но не как свойство: вычисленный opacity дочернего элемента остается 1, хотя он рисуется внутри бледного родителя.

opacity: 0, visibility: hidden и display: none

Все три заставляют элемент исчезнуть, но во всем остальном они различаются:

	`opacity: 0`	`visibility: hidden`	`display: none`
Занимает место	да	да	нет
Получает клики и фокус	да	нет	нет
Читается программами чтения с экрана	да	нет	нет
Можно анимировать переходом	да, плавно	переключается в одном из концов, без затухания	нет

Больнее всего бьет вторая строка. На кнопку с opacity: 0 все равно можно кликнуть и перейти табом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

Ниже браузер отвечает, какой элемент находится в точке внутри каждой скрытой кнопки. Кнопка с opacity: 0 отвечает «clickable», а кнопка с visibility: hidden нет. Кнопка Visible начинается после двух пустых мест по 150px, потому что место освободила только кнопка с display: none. Чтобы растворить элемент, а затем убрать его, анимируйте opacity и в конце задайте visibility: hidden.

Затухание при наведении

opacity одно из самых дешевых для анимации свойств, поэтому это стандартный способ плавно показывать и скрывать элементы. Подпись, которая появляется поверх изображения:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

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

Доступность: бледный текст теряет контрастность

Снижая opacity, вы снижаете контрастность. Серый текст на белом с opacity: 0.5 может опуститься намного ниже коэффициента 4.5:1, который нужен основному тексту. Для второстепенного текста выбирайте цвет, проходящий по контрастности, а не делайте бледным темный. Для отключенных элементов управления пониженная прозрачность это частый сигнал, но сочетайте ее с атрибутом disabled, чтобы элемент был недоступен и с клавиатуры и объявлялся как отключенный.

Побочный эффект: контекст наложения

Любая opacity меньше 1 создает новый контекст наложения, как и transform. Дочерние элементы с высоким z-index тогда накладываются только внутри бледного элемента и не могут подняться над элементами снаружи. Если выпадающее меню внутри полупрозрачной панели уходит под другой элемент, причина в этом (наложение объяснено на странице про z-index).

Частые ошибки

Карточка становится бледной ради прозрачного фона. Текст бледнеет тоже. Используйте для фона rgb(... / 0.5).
Попытка вернуть дочернему элементу непрозрачность. Opacity родителя ограничивает каждого потомка.
Скрытие только через opacity: 0. Элемент по-прежнему получает клики и фокус. Добавьте visibility: hidden или используйте display: none (pointer-events: none останавливает клики, но не фокус с клавиатуры).
opacity: 50. Opacity от 0 до 1; 50 приводится к 1. Пишите 0.5 или 50%.
Низкоконтрастный текст из-за opacity. Проверяйте контрастность результата, а не исходного цвета.

Часто задаваемые вопросы

Что делает opacity в CSS?

Задает, насколько элемент прозрачен, от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Действует на весь элемент, включая текст, рамку, изображения и все дочерние элементы, как на один сведенный слой.

Как сделать прозрачным только фон, а не текст?

Не трогайте opacity и задайте фону цвет с альфой: background-color: rgb(37 99 235 / 0.5); или rgba(37, 99, 235, 0.5). Текст и дочерние элементы остаются полностью непрозрачными.

Может ли дочерний элемент быть непрозрачнее родителя?

Нет. Opacity родителя применяется ко всей группе, поэтому opacity: 1 у дочернего элемента ее не отменит. Дочерний элемент родителя с 0.5 рисуется максимум с половинной непрозрачностью. Перенесите прозрачность в цвет фона родителя.

Чем отличаются opacity: 0, visibility: hidden и display: none?

opacity: 0 скрывает элемент, но он по-прежнему занимает место, на него можно кликнуть, и его читают программы чтения с экрана. visibility: hidden сохраняет место, но на элемент нельзя кликнуть и его не читают. display: none полностью убирает его из раскладки.

Можно ли задавать opacity в процентах?

Да. opacity: 50% то же самое, что opacity: 0.5, во всех актуальных браузерах. Значения меньше 0 или больше 1 приводятся к этому диапазону.

Связанные концепции

Прозрачность в CSS: opacity, прозрачный фон и затухание