Второй вариант затемнения фона css

Затемнение фона с помощью CSS

Привет, сегодня мы рассмотрим затемнение фона с помощью CSS. Предлагаю вашему вниманию 2 достаточно простых варианта.

оригинальная картинка без затемнения фона
оригинальная картинка

Первый вариант

Первый варинт затемнения фона с помощью css
Первый вариант

<div style="background:url('1.jpg');background-position:center; width:300px; height:200px">

<div style="width:100%;height:100%; background:black; opacity:0.5"></div>

</div>

 

 

Второй вариант затемнение фона с помощью CSS.

Второй вариант затемнения фона css
Второй вариант

Этот вариант более практичен так как тег img масштабирует изображение.

<div style='width:300px; position:relative;' >
<div style='background:black;position:absolute;z-index:-111;'><img src='1.jpg' style='width:100%;opacity:0.5;' alt=''></div>
<p>adsdf asdf adfad asdfsdfdf</p>
</div>


Добавить комментарий