Непрозрачность, прозрачность и альфа-канал: полное руководство

Непрозрачность, прозрачность и альфа — три термина, которые дизайнеры и разработчики нередко используют как синонимы. Однако они описывают связанные, но различные понятия, которые ведут себя по-разному на практике. Путаница между ними приводит к ошибкам в CSS, неожиданно унаследованной прозрачности и изображениям, которые выглядят правильно в одном контексте и неправильно — в другом. Это руководство разграничивает терминологию и объясняет, как именно работает каждый механизм, когда и какой из них использовать, а также каковы последствия для производительности в сложных многослойных интерфейсах.

Что такое непрозрачность?

Непрозрачность описывает, насколько объект визуально плотен — насколько он сплошной. Обычно она выражается значением от 0 до 1, где: - 0 = полностью прозрачный (невидимый) - 1 = полностью непрозрачный (полностью видимый) - 0.5 = видимый на 50%, просвечивающий на 50%

Непрозрачность — это свойство отрендеренного объекта, а не самого цвета. Когда говорят «этот элемент имеет непрозрачность 50%», имеется в виду, что весь элемент — включая все дочерние элементы, границы, фоны и текст — отображается с половиной своей видимости.

Это различие принципиально важно в CSS.

opacity, visibility и display

Три CSS-свойства могут скрыть элемент, но только одно делает это через прозрачность:

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

Для анимации следует использовать именно opacity. Это свойство аппаратно ускоряется во всех современных браузерах и не вызывает пересчёт разметки, что делает его наиболее производительным вариантом для анимации затухания.

Альфа-каналы в изображениях

В растровых форматах изображений альфа-канал — это четвёртый канал данных наряду с красным, зелёным и синим. Если RGB-каналы задают цвет, то альфа-канал задаёт непрозрачность каждого пикселя независимо.

Значение альфа пикселя определяет, сколько фона просвечивает через него. Именно так работают прозрачные PNG-логотипы: пиксели логотипа полностью непрозрачны (альфа = 255), тогда как окружающая область полностью прозрачна (альфа = 0), позволяя тому, что находится позади изображения, просвечивать насквозь.

Поддержка альфа-канала форматами

Не все форматы изображений поддерживают альфа-канал:

Формат	Поддержка альфа	Примечания
PNG	Да (8-бит)	Без потерь, широко используется для логотипов и иконок
WebP	Да	С потерями или без, с альфа-каналом, отличное сжатие
AVIF	Да	Наилучшее сжатие, растущая поддержка браузерами
SVG	Да (через opacity/CSS)	Векторный — масштабируется без потери качества
JPEG	Нет	Данные альфа-канала отбрасываются; фон становится белым или чёрным
GIF	Бинарный (0 или 1)	Пиксель либо полностью прозрачный, либо полностью непрозрачный

При создании JPEG из изображения с прозрачностью альфа-канал компонуется на фоновый цвет (как правило, белый) перед кодированием. Именно поэтому при сохранении прозрачного PNG в JPEG появляется белый или чёрный фон: формат не имеет механизма для хранения частичной прозрачности.

Альфа-канал в редакторах изображений

В таких инструментах, как Photoshop, Figma или Affinity Photo, альфа-канал визуализируется в виде шахматного узора — общепринятого способа обозначить «здесь нет цвета». При экспорте области с шахматным узором становятся прозрачными пикселями в выходном файле, которые видны только в форматах, поддерживающих альфа-канал.

Типичная ошибка рабочего процесса: дизайн логотипа на цветном фоне, экспорт в PNG и обнаружение встроенного фона. Решение — убедиться, что фоновый слой скрыт или удалён перед экспортом, оставив только пиксели с альфа-каналом.

CSS-свойство opacity и rgba/hsla

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

Свойство CSS opacity

.element {
  opacity: 0.5;
}

Это применяется ко всему элементу и всем его потомкам. Если родительский элемент имеет opacity: 0.5, а дочерний — opacity: 0.8, эффективная непрозрачность дочернего элемента составит 0.5 × 0.8 = 0.4. Непрозрачность перемножается, а не складывается.

Это имеет важное следствие: нельзя сделать дочерний элемент более непрозрачным, чем родительский. Если карточка имеет opacity: 0.5, каждый текст, изображение и декоративный элемент внутри неё также будет иметь не более 50% непрозрачности, независимо от значений opacity, заданных для дочерних элементов.

Создаёт контекст наложения: элемент с opacity менее 1 создаёт новый контекст наложения, что может влиять на поведение слоёв z-index.

rgba() — альфа в значении самого цвета

.element {
  background-color: rgba(59, 130, 246, 0.5);  /* Синий с 50% прозрачностью */
  color: rgba(0, 0, 0, 1);                     /* Текст остаётся полностью непрозрачным */
}

При использовании rgba() (красный, зелёный, синий, альфа) полупрозрачным становится только конкретное CSS-свойство, использующее этот цвет. Сам элемент остаётся при полной непрозрачности. Дочерние элементы не затрагиваются.

Это правильный подход, когда нужно: - Полупрозрачный фон при полностью непрозрачном тексте - Частично прозрачная граница - Полупрозрачная тень блока

/* Правильно: фон прозрачный, текст — нет */
.card {
  background-color: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;  /* Всегда полностью непрозрачный */
}

/* Неправильно: вся карточка, включая текст, становится полупрозрачной */
.card {
  background-color: #FFFFFF;
  opacity: 0.15;  /* Это делает текст почти невидимым */
}

hsla() — HSL с альфа-каналом

background-color: hsla(210, 100%, 56%, 0.7);

hsla() работает идентично rgba(), но использует цветовую модель HSL для определения цвета. Параметр альфа (четвёртое значение, от 0 до 1) ведёт себя точно так же, как в rgba(). Для дизайнеров, которые мыслят в терминах оттенка, насыщенности и светлоты, hsla() часто даёт более интуитивные результаты при настройке прозрачности для вариантов цвета.

Современный CSS: синтаксис с /

CSS Color Level 4 ввёл более чистый синтаксис с косой чертой для указания альфа в любой цветовой функции:

background-color: rgb(59 130 246 / 0.5);   /* То же, что rgba(59, 130, 246, 0.5) */
background-color: hsl(210 100% 56% / 0.7); /* То же, что hsla(210, 100%, 56%, 0.7) */
background-color: oklch(0.6 0.2 250 / 0.8);/* OKLCH с альфа-каналом */

Это предпочтительный современный синтаксис, поддерживаемый всеми актуальными браузерами. Он работает и с hex-значениями:

background-color: #3B82F680;  /* Hex с 2-значным альфа (80 hex = ~50% непрозрачности) */

Значение альфа в hex работает по шкале 0–255, кодируемой двумя шестнадцатеричными цифрами: - FF = 100% непрозрачный - 80 = ~50% непрозрачный - 40 = ~25% непрозрачный - 00 = полностью прозрачный

Используйте Конвертер цветов, чтобы перевести любой hex-цвет в его rgba-эквивалент с нужным значением альфа.

Наложение с прозрачностью

Прозрачные слои — фундаментальный приём для создания глубины, оверлеев и тонированных эффектов в UI-дизайне. Понимание принципов их компоновки необходимо для предсказания результата.

Простое альфа-компонирование

Когда полупрозрачный передний слой размещается поверх фона, итоговый цвет пикселя определяется так:

result = foreground × alpha + background × (1 - alpha)

Для белого переднего плана (#FFFFFF) с 20% непрозрачностью поверх синего фона (#1D4ED8 / #1D4ED8): - Результат ≈ 80% синего + 20% белого = немного осветлённый синий, приблизительно #4A71DF

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

Практические паттерны оверлеев

Затемняющие оверлеи часто используются на hero-изображениях для улучшения читаемости текста:

.hero {
  position: relative;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);  /* 50% чёрный оверлей */
}

Тонированные оверлеи сдвигают цветовую температуру изображения:

/* Тёплый эффект сепии */
.photo-overlay {
  background-color: rgba(180, 100, 30, 0.3);
  mix-blend-mode: multiply;
}

Эффект матового стекла (glassmorphism):

.glass-card {
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Несколько альфа-слоёв

При стопке из нескольких прозрачных слоёв итоговый результат зависит от порядка компоновки. Каждый слой компонуется с результатом всех слоёв ниже него. Стопка из десяти слоёв с 10% непрозрачностью каждого не равна 100% непрозрачности — эффективное покрытие растёт логарифмически:

1 слой с 10%: 10% покрытия
2 слоя с 10%: 19% покрытия (10% + 90%×10%)
5 слоёв с 10%: 41% покрытия
10 слоёв с 10%: 65% покрытия

Это важно при построении анимационных эффектов с наложением слоёв — стопка полупрозрачных кадров для создания эффекта размытия в движении не накапливается линейно до полной непрозрачности.

Производительность при работе с оверлеями

Не все техники прозрачности одинаковы с точки зрения производительности рендеринга.

Быстро: opacity и фоны rgba

CSS-свойство opacity и фоновые цвета rgba()/hsla() компонуются на GPU во всех современных браузерах
Элементы с opacity < 1 переводятся на собственный слой компоновщика, что исключает накладные расходы CPU на перерисовку в каждом кадре
Для анимаций появления/исчезновения переходы opacity — одни из самых дешёвых CSS-анимаций

/* GPU-ускоренное затухание */
.element {
  transition: opacity 0.3s ease;
}

Дорого: backdrop-filter

backdrop-filter: blur() — используемый в glassmorphism — требует, чтобы браузер прочитал все пиксели позади элемента, применил фильтр размытия, а затем отрендерил результат. Это значительно более требовательно к GPU, чем простой прозрачный фон.

Практические ограничения: ограничьте backdrop-filter: blur() небольшим количеством элементов в области видимости (как правило, не более 2–4). На мобильных устройствах среднего класса большое количество одновременных элементов «матового стекла» может вызывать заметные просадки частоты кадров.

Снижение нагрузки: для маломощных устройств определите предпочтение и используйте запасной вариант:

@media (prefers-reduced-motion: reduce) {
  .glass-card {
    background-color: rgba(20, 20, 30, 0.9);  /* Непрозрачный запасной вариант */
    backdrop-filter: none;
  }
}

Очень дорого: mix-blend-mode

mix-blend-mode требует, чтобы браузер компоновал элемент со всеми слоями под ним по определённой формуле смешивания. Когда элементы перекрывают множество разнородных фоновых слоёв, стоимость компоновки высока.

Используйте mix-blend-mode экономно — для декоративных элементов или фиксированных фоновых оверлеев, но не для элементов, прокручивающихся поверх сложного, разнообразного контента.

Подсказка will-change

Для элементов, которые будут анимировать свою непрозрачность, will-change: opacity указывает браузеру заранее перевести элемент на слой компоновщика до начала анимации:

.modal {
  will-change: opacity;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal.visible {
  opacity: 1;
}

Используйте эту подсказку выборочно — перевод слишком большого числа элементов через will-change может фактически ухудшить производительность, исчерпав память GPU.

Ключевые выводы

Непрозрачность (0–1) описывает, насколько элемент непрозрачен. CSS-свойство opacity применяется ко всему элементу и всем его потомкам — дочерние элементы не могут переопределить его.
Альфа-каналы в изображениях — это четвёртый канал данных (наряду с RGB), определяющий попиксельную прозрачность. PNG, WebP, AVIF и SVG поддерживают альфа; JPEG и GIF — нет (или только бинарный альфа).
rgba() и hsla() применяют прозрачность к отдельным CSS-свойствам (фон, граница, тень) без влияния на дочерние элементы — используйте их, когда нужен прозрачный фон при полностью непрозрачном тексте.
Современный CSS использует синтаксис / для альфа в любой цветовой функции: rgb(59 130 246 / 0.5), oklch(0.6 0.2 250 / 0.8).
Наложение с прозрачностью следует альфа-компонированию: result = foreground × alpha + background × (1 − alpha). Стопка слоёв не накапливается линейно до полной непрозрачности.
По производительности: opacity и фоны rgba() GPU-ускорены и дёшевы; backdrop-filter: blur() дорог; mix-blend-mode на прокручиваемом контенте очень дорог.
Используйте Конвертер цветов, чтобы перевести любой hex-цвет в формат rgba и вычислить точное значение альфа для любого уровня прозрачности.