Как сделать затемнение фона (картинки) на CSS

Для создания эффекта затемнения фона картинки с использованием CSS, вы можете использовать свойство ::after и псевдоэлементы. Вот пример кода, который позволит вам создать этот эффект:

HTML:

<div class="image-container">
  <img src="your-image.jpg" alt="Your Image">
</div>

CSS:

.image-container {
  position: relative;
  display: inline-block;
}

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Измените значение альфа-канала (0.5) по вашему усмотрению */
  z-index: 1;
  pointer-events: none; /* Предотвращает перехват событий мыши на псевдоэлементе */
}

В этом примере мы создали контейнер .image-container, который содержит изображение. Затем мы использовали псевдоэлемент ::after, чтобы создать через него затемнение фона. С помощью свойств position, top, left, width и height мы разместили псевдоэлемент поверх изображения, а свойством background-color установили цвет затемнения. Значение rgba(0, 0, 0, 0.5) представляет собой черный цвет с альфа-каналом 0.5, что означает полупрозрачность на 50%. Вы можете изменить это значение по своему вкусу.

Результатом будет изображение с затемненным фоном. Вы можете изменять цвет затемнения, регулируя значения в rgba(), чтобы достичь желаемого эффекта.