Всем привет. На связи coderistu.ru
В одной из своих статей я писал, как сделать появление текста при наведении на картинку. И там как - раз использовался эффект затемнения заднего фона, чтобы текст на переднем плане хорошо читался. Т. к. темный фон - overlay я часто использую на своих сайтах в качестве подложки в различных блоках, то решил рассмотреть процесс его создания в отдельной статье.
Итак, поехали.
Допустим, у нас есть блок <div> c произвольным бэкграундом, поверх которого нам надо сделать css затемнение фона:
Разметка блока:
<p>Затемнение фона</p>
</div>
.block {
position: relative;
overflow: hidden;
height: 400px;
width: 100%;
z-index: 3;
background:url(cat.jpg);
background-size:cover}
p {font-size: 70px;
color:#fff;
text-align: center;
padding: 5%}
.block:before {
background: rgb(57 53 53 / 71%);/*задаем цвет и прозрачность затемнения*/
content: "";
position: absolute;
width: 100%;
height: 500px;
z-index: -1}
На этом все. Надеюсь, что статья была вам полезной!
ДЕМОСКАЧАТЬ