Чтобы сделать затемненный фон на CSS, можно использовать свойства opacity или background-color.

Свойство opacity:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 999;
}

Здесь мы создали класс “overlay”, который задает позицию элемента, его размеры, цвет фона и прозрачность с помощью свойства opacity. Определение свойства z-index равным 999 позволяет разместить элемент поверх остального содержимого.

Свойство background-color:

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

С помощью свойства background-color мы можем указать цвет фона и его прозрачность. RGBA-значение определяет красный, зеленый, синий и прозрачность (alpha). Значение alpha может быть от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

Оба варианта создают затемненный фон, но если вам нужно управлять только прозрачностью, лучше использовать opacity, а если вам нужно указать определенный цвет фона и прозрачность, то лучше использовать background-color с RGBA-значением.