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

🗓️ Обновлено: 17.08.2022
💬Комментариев: 0
👁️Просмотров: 4984

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

Для начала пропишем 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
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 18277
Появление элементов при скролле
Просмотров: 16837
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 8527
Как выровнять картинку по центру с помощью CSS
Просмотров: 6950
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 6785
Проверка знаний
🤔Хорошо ли вы знаете 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