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

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

Для начала пропишем html для наглядности:

<div class="item">
  <div class="item-photo">
    <img src="https://images.unsplash.com/photo-1616530020606-e15459064769?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" alt="">
  </div>
</div>

Здесь мы вставили свою картинку внутрь блока с классом item-photo.

И дальше перейдем к CSS

.item-photo {
  position: relative;
}

.item-photo img {
  width: 100%;
}

.item-photo:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  background-color: rgba(0,0,0,0.5);
}

Что мы здесь делаем? Мы добавляем через псевдоэлемент :after прозрачный фон поверх блока с классом item-photo.

Обратите внимание на эту строчку

background-color: rgba(0,0,0,0.5);

Здесь мы задаем фон нашему псевдоэлементу. Если бы мы вместо 0.5 прописали бы 1, то картинку полностью покрыл бы черный фон. Вы можете поэкспериментировать и выбрать любое другое число в пределах 0 и 1.

Еще можно задать градиент, вместо простой заливки. То есть, к примеру, чтобы затемнение было к низу картинки. Вот как это можно сделать:

.item-photo {
  position: relative;
}

.item-photo img {
  width: 100%;
}

.item-photo:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0; left: 0;
  background: linear-gradient(to bottom, transparent 0%,  rgba(0,0,0,0.9) 100%);
}

Это один из методов, как сделать затемнение для картинки. Вы можете предложить свой вариант в комментариях — уверены, он будет очень полезен для новичков.