Разные уровни прозрачности в CSS: родительский и дочерний div

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

Чтобы настроить прозрачность фона, не затрагивая видимость элементов, таких как текст или изображения, в CSS используется функция rgba применительно к свойству background-color.

.transparent-bg {
  background-color: rgba(255, 255, 255, 0.3); /* Прозрачность регулируется последним значением (здесь это 0.3) */
}

.opaque-content {
  color: #000; /* Текст будет насыщенно-чёрным */
}

Управление прозрачностью с помощью RGBA

Использование ::before для создания полупрозрачных фонов

Псевдоэлемент ::before в CSS – это универсальный инструмент дизайнера при создании полупрозрачных фонов. Разберёмся, как с этим справиться:

.container {
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Создаём полупрозрачное покрытие */
  z-index: -1; /* Это не затмит содержимое */
}

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

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

Совместимость с IE8

Не следует забывать о пользователях устаревших браузеров, например IE8, которые могут не поддерживать функцию rgba, но способны обработать прозрачный PNG или использовать свойство filter:

.transparent-bg {
  background: url('/path/to/transparent-bg.png');
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4Cffffff, endColorstr=#4Cffffff); /* Весомый фильтр */
}

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

Sass приходит на помощь

В Sass функция transparentize позволяет легко настраивать уровень прозрачности:

.transparent-bg {
  background-color: transparentize($color, 0.7); // 30%-ная прозрачность, что возможно управлять
}

Чёткость текста дочерних элементов и полноэкранные слои

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

Чтобы дочерние элементы не стали непреднамеренно прозрачными, для них устанавливаем значение none в свойстве filter:

.child {
  filter: none; /* Не допускаем влияния фильтров на дочерние элементы */
}

Для элементов, на которые filter не влияет, используйте свойство zoom.

Расширение на весь экран

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

.fullscreen::before {
  position: absolute;
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0;
  /* Сюда можно добавить ваши стили */
}

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

Для понимания принципа работы прозрачности фона в CSS будет полезна следующая аналогия:

Палитра (🎨) = HTML-элемент
Краска (🖌️) = Цвет фона
Накладка (📜) = Прозрачный слой
Изображение (🖼️) = Содержимое (текст, изображения)

Применение прозрачности выглядит так:

.element::before {
  content: "";        
  display: block;    
  position: absolute;
  top: 0; left: 0;   
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;      
}
.element {
  position: relative;
}

Итог: 🎨 + 📜 = Идеальное комбо, которое не скроет 🖼️!

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

1. background-color – CSS: Каскадные таблицы стилей | MDN — Разыскиваем применение RGBA для создания прозрачного фона в CSS.
2. Поддержка RGBa в браузерах | CSS-Tricks – CSS-Tricks — Как создать прозрачные фоны в CSS, сохранив хорошую читабельность текста.
3. Прозрачность/прозрачность изображения в CSS — Обзор и практика применения свойства 'opacity' в CSS3.
4. Псевдоэлементы – CSS: Каскадные таблицы стилей | MDN — Примеры использования псевдоэлементов CSS для создания изящных эффектов прозрачности, не затрагивающих текст.
5. html – Как я могу уменьшить прозрачность фона элемента с помощью CSS? – Stack Overflow — Обсуждение на Stack Overflow о том, как изменить прозрачность фона элемента, не воздействуя на его содержимое.
6. Несколько границ | CSS-Tricks – CSS-Tricks — Техники CSS, включая использование псевдоэлемента ::after для создания фонов.
7. filter – CSS: Каскадные таблицы стилей | MDN — Примеры визуальных эффектов в CSS, включая многообразие фильтров.