В CSS есть несколько способов сделать фон полупрозрачным.

Самый очевидный — свойство opacity. Но вот в чём подвох: если ты задаёшь opacity для контейнера, прозрачными становятся все его дочерние элементы. То есть и фон, и текст, и иконки — всё бледнеет. Это не то, что нам нужно.

Вместо этого используют прозрачность только для фонового изображения или цвета. Для этого есть два основных подхода:

  • Использовать rgba() или hsla() для цвета фона (background-color).
  • Наложить полупрозрачное изображение через background-image с помощью linear-gradient или псевдоэлементов.

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

Можно сделать так:


.block {
  background-image: url('bg.jpg');
  opacity: 0.5;
}

Результат: и фон, и текст становятся полупрозрачными.

Вариант с rgba() (для цветного фона):
Если нужен просто цвет с прозрачностью:

.block {
  background-color: rgba(255, 255, 255, 0.5); /* белый с 50% прозрачностью */
}

Результат: текст остаётся нормальным, фон — полупрозрачный.

Вариант с linear-gradient (для изображения):
Можно наложить полупрозрачный градиент поверх картинки:

.block {
  background-image:
    linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url('bg.jpg');
    background-position: center center;
    background-repeat: no-repeat;
}

Результат: фон затемняется, текст не тронут.