Как затемнить фоновое изображение CSS

Чтобы затемнить фоновое изображение CSS, вы можете использовать свойство ::before псевдоэлемента, чтобы добавить непрозрачность на фоновое изображение с помощью opacity или добавить цветовой слой на фоновое изображение с помощью background-color.

Например, чтобы затемнить фоновое изображение через псевдоэлемент ::before используйте следующий код CSS:

.container {
  position: relative;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5); /* черный цвет с прозрачностью 0.5 */
}

В этом примере мы добавили черный слой с непрозрачностью 0.5 на фоновое изображение.

Если вы хотите добавить непрозрачность на фоновое изображение, вместо цветового слоя, используйте свойство opacity. Например:

.container {
  position: relative;
  background-image: url("path/to/image.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5; /* непрозрачность 0.5 */
}

В этом примере мы установили фоновое изображение с помощью свойства background-image, а затем добавили псевдоэлемент ::before с использованием opacity.

Заметьте, что вы можете настраивать цвет и непрозрачность в свойстве background-color и opacity, соответственно, в зависимости от ваших требований.