Как наложить тень на картинку?

551

30 октября 2019, 07:10

Есть картинка. Нужно наложить на нее как-бы прозрачную, черного цвета пленку, чтобы картинка была тусклой.
Я написал так:

img { 
    box-shadow: inset 0 0 12px #000; 
    opacity: 0.2; 
}

<img src="https://via.placeholder.com/200" alt="">

Но почему-то не работает. Что я пишу не так?

Answer 1

А Вы точно уверены, что Вам нужна тень? Или всё-таки равномерный полупрозрачный слой поверх всей картинки? Если слой, то с помощью box-shadow Вы такого эффекта не добьётесь - придётся использовать дополнительный элемент.

К сожалению, у img нет своих псевдоэлементов, поэтому как вариант - обернуть картинку в блок и уже с помощью его :after наложить плёнку на изображение:

.img-wrap { 
  float: left; 
  position: relative; 
} 
img { 
  max-width: 100%; 
  display: block; 
  margin: 0; 
} 
.img-wrap:after { 
  content: ''; 
  display: block; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  background-color: rgba(0,0,0,.5); 
  top: 0; 
  left: 0; 
}

<div class="img-wrap"> 
<img src="https://avatars.mds.yandex.net/get-pdb/225396/2dc17845-391c-4e56-b49e-a3559c245e97/s1200" alt="" /> 
</div>

Answer 2

Возможно... на вашем сайте по дефолту у тега img записан opacity: 1;

В обычном редакторе ваш код работает. Можно попробовать opacity: 0.2 !important;. Important говорит браузеру "Этот код важнее, смотри на меня и игнорируй другие стили".

Или задать картинке конкретный класс: <img src="" class="bubu"/> и уже .bubu {opacity: 0.2;}