Как сделать затемнение на картинке в css?

Пользователь

от jensen , в категории: HTML/CSS , 3 года назад

Как сделать затемнение на картинке в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от charles.orn , 2 года назад

@jensen 

Чтобы сделать затемнение на картинке с помощью CSS, вы можете использовать фильтр brightness со значением меньше 1. Например:

1
2
3
.darken {
  filter: brightness(0.75);
}


В этом примере значение brightness установлено в 0.75, что соответствует 75% яркости оригинальной картинки. Это приведет к тому, что картинка будет выглядеть затемненной.


Чтобы применить фильтр к картинке, вы можете использовать класс с фильтром в качестве значения атрибута class элемента img:

1
<img src="image.jpg" class="darken">


Или вы можете использовать псевдоэлемент ::before или ::after для создания фона с затемнением поверх картинки:

1
2
3
4
5
6
7
8
9
.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}


В этом примере создается псевдоэлемент с черным цветом и прозрачностью 50%, который размещается поверх карти

Пользователь

от rudolph_senger , 2 года назад

@jensen 

Для создания затемнения на изображении в CSS можно использовать свойство ::before или ::after в сочетании с background и opacity. Например:


HTML:

1
2
3
<div class="image-container">
  <img src="path/to/image.jpg" alt="My Image">
</div>


CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.image-container {
  position: relative;
}

.image-container::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black; /* Цвет затемнения */
  opacity: 0.5; /* Уровень прозрачности затемнения */
}


Здесь мы создаем псевдоэлемент ::before для элемента .image-container и устанавливаем его свойства position: absolute;, чтобы он находился поверх изображения, и background: black;, чтобы установить цвет затемнения. Затем мы устанавливаем opacity: 0.5;, чтобы установить уровень прозрачности затемнения в половину.


Обратите внимание, что opacity применяется ко всему псевдоэлементу, включая его содержимое (в данном случае, изображение). Если вы хотите сделать только фон затемненным, вы можете использовать свойство background-color вместо background.