Как затемнить картинку в css

Чтобы затемнить картинку в CSS, можно использовать свойство opacity и псевдоэлемент ::before или ::after. Например:

HTML:

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

CSS:

.image-container {
  position: relative;
}

.image-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5); /* цвет тени */
  opacity: 1; /* прозрачность тени */
}

Здесь мы создавали псевдоэлемент ::before нашего контейнера и делаем его затемненным с помощью свойства background-color и opacity. Псевдоэлемент ::before размещается перед элементом с помощью свойства position: absolute и растягивается до размеров родительского контейнера с помощью свойств top, bottom, left и right.

Примените стили на свою страницу и картинка будет затемнена. Чтобы настроить темноту затемнения, вы можете изменять значение цвета и opacity.

Также можно использовать другие способы, например, использование CSS фильтров (filter: brightness(50%) или filter: grayscale(100%)), или наложение картинки на темный фон.