GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

GRAVITSAPA.info - интересный блог

Делаем размытый background на HTML и CSS

406 просмотров Создание сайтов Нет комментов » 29 Ноя 2019

Что бы сделать размытый background, а на нём нормальный текст используем html контейнер:
<div class="blur-block">
<div class="bckgr-blur"></div>
<div class="str-txt">
<h3>Четкий заголовок</h3>
<p>Четкий текст за которым размытый фон</p>
</div>
</div>

и применим такие стили css:
.blur-block {
position: relative;
}
.bckgr-blur{
background-image: url("https://site.com/KARTINKA.jpg");
filter: blur(8px);
-webkit-filter: blur(8px);
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.str-txt {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
}

получим результат:

Четкий заголовок

Четкий текст за которым размытый фон

Такой вот простой способ размыть фон на CSS. Можно использовать в слайдерах, при hover или в связке с js при разных событиях. Пишите комменты, делитесь статьёй в соц. сетях 😉

Оставь свой коммент

NIGHT
Наверх