Как сделать css затемнение фона

7604

Всем привет. На связи coderistu.ru

В одной из своих статей я писал, как сделать появление текста при наведении на картинку. И там как - раз использовался эффект затемнения заднего фона, чтобы текст на переднем плане хорошо читался. Т. к. темный фон - overlay я часто использую на своих сайтах в качестве подложки в различных блоках, то решил рассмотреть процесс его создания в отдельной статье.

Итак, поехали.

Допустим, у нас есть блок <div> c произвольным бэкграундом, поверх которого нам надо сделать css затемнение фона:

Разметка блока:

<div class="block">
<p>Затемнение фона</p>
</div>
CSS - стили
<style>
.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}

На этом все. Надеюсь, что статья была вам полезной!
ДЕМОСКАЧАТЬ

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

Ваш адрес email не будет опубликован.

*
code