Задать прозрачность фона элемента в CSS, сохраняя текст непрозрачным

Быстрый ответ

Если задача заключается в применении прозрачности к фону элемента, не затрагивая при этом его содержимое, следует использовать свойство background-color с цветом в формате rgba:

.element {
  background-color: rgba(255, 0, 0, 0.5); /* Красный цвет обрёл прозрачность */
}

Понимание rgba() и обратная совместимость для старых браузеров

Преимущества применения rgba()

Работа с rgba() подразумевает использование значений красного (red), зелёного (green), синего (blue) и альфа-канала (alpha), который отвечает за уровень прозрачности. Изменяя значение альфа-канала, можно контролировать прозрачность фона.

.element {
  background-color: rgba(0, 255, 125, 0.6); /* Зелёный цвет с прозрачностью на уровне 60% */
}

Подробнее об этом расскажет наш спикер на видео

Фронт устаревших браузеров и резервные стили

Чтобы учесть старые версии браузеров, не поддерживающих формат rgba, можно предложить альтернативу в виде фона с полностью непрозрачным цветом:

.element {
  background: rgb(255, 0, 0); /* Полностью непрозрачный красный для старых браузеров */
  background-color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный для новых версий */
}

Альтернативные методы создания прозрачных фонов

Изысканные оттенки: PNG или SVG изображения

Вместо использования rgba() можно применить изображения в форматах PNG или SVG, что позволит внести в дизайн уникальные текстуры и узоры:

.element {
  background-image: url('pattern.png'); /* Расцветка элемента в изысканном ключе */
}

Эффекты перекрытия с помощью псевдо-элементов

Псевдо-элементы прекрасно подойдут для создания эффекта перекрытия, в то же время оставляя содержимое элемента непрозрачным:

.element {
  position: relative;
}
.element::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 0, 0, 0.5); /* Воплощаем фон в красном с полупрозрачностью */
  z-index: -1;
}

Визуализация

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

.element {
  background-color: rgba(255, 0, 0, 0.5); /* Красный фон с прозрачностью в 50% */
}

Полезным будет представлять прозрачность в CSS как зимнее окно, уровень замёрзания которого зависит от применяемой прозрачности:

Абсолютно прозрачно: [🔲🔲🔲🔲🔲] (opacity: 1)
Лёгкий заморозок: [🔲🌫️🔲🌫️🔲] (opacity: 0.8)
Полупрозрачное: [🌫️🌫️🌫️🌫️🌫️] (opacity: 0.5)
Почти полностью незаметно: [🌁🌁🌁🌁🌁] (opacity: 0.2)

Подчёркивание чёткости содержимого

Чтобы контент на полупрозрачном фоне оставался читаем вне зависимости от уровня прозрачности, важно умело работать с внутренними отступами контейнеров:

.pane {
  padding: 20px; /* Расширяем пространство для содержимого */
  background-color: rgba(0, 0, 0, 0.5); /* Фон как мягкое облако кофе с молоком */
}

Гармония в позиционировании: сочетание inline и block

Для сохранения целостности разметки при работе с элементами inline используйте display: inline-block.

.element {
  display: inline-block; /* Обеспечиваем прямолинейное позиционирование  */
}

А для абсолютно позиционированных фоновых элементов следует задать размеры:

.background {
  position: absolute;
  width: 100%;
  height: 100%;
}

IE: Из глубин истории браузеров

В Internet Explorer прозрачность можно реализовать с помощью фильтров:

.element {
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
}

И ещё немного помощи на пути:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Полезные материалы

1. Прозрачность в CSS на сайте MDN
2. CSS: Прозрачность и полупрозрачность изображений от w3schools
3. RGBA: поддержка в браузерах – советы от CSS-Tricks
4. HTML-элемент с полупрозрачным фоном с рекомендациями Stack Overflow
5. Прозрачность на CSS-Tricks
6. Введение в прозрачность и RGBA на CSS3.info
7. Свойство mix-blend-mode в документации MDN