Как с помощью CSS произвести затемнение картинки?

Question

[Роман Томми]

.bg-fon {

}
Необходимо произвести затемнение картинки как показано на примере, какие есть возможность для реализации данной идеи?
Из

в

Comments

[Сергей delphinpro]

Варианта два:

1. Наложить поверх картинки полупрозрачный элемент нужного цвета.
2. Задать фон нужного цвета блоку под картинкой, а самой картинки необходимую прозрачность opacity

[Роман Томми]

Сергей delphinpro, хороший вариант.

Answer 1

[Митя ТоДаСё]

наложить стиль на картинку

.bg-fon {
    background-color:rgba(0,0,0,.3);
    height:100%;
    position:fixed;
    width:100%;
    top:0;
    left:0;
}

Comments

[Роман Томми]

Не додумался наложить стиль, думал применять к картинке. Спасибо за решение))

Answer 2

[RAX7]

CSS фильтрами
https://html5book.ru/css3-filtry/
https://codepen.io/html5book/pen/WGQOGg

или сверху накладывать черный полупрозрачный div

Answer 3

[Andrew]

Вот так
гугл тоже знает