Як зробити затемнення фону (картинки) на CSS

🗓️ Оновлено: 17.08.2022
💬Коментарів: 0
👁️Переглядів: 4986

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

Для початку пропишемо 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%);
}
Затемнення картинки

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

Стаття була корисною?
👍
Так - 10
👎
Ні - 11
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18285
Поява елементів при скролі
Переглядів: 16839
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6953
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6789
Як зробити ефект натискання кнопки на CSS
Переглядів: 6209
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab