Як зробити затемнення фону (картинки) на 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%);
}

Це один із методів, як зробити затемнення для картинки. Ви можете запропонувати свій варіант у коментарях – впевнені, він буде дуже корисним для новачків.