как задать blur filter
на чистом css
div'у с background: url()
только в пределах другого div
?
Пример на фото, через filter: blur(10px)
получаются нечёткие границы размытия
Оберните div
со свойством blur
в div
со свойством overflow:hidden
:
.parent{
background-image:url("https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg");
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
height:200px;
padding:50px 0;
}
.inner{
overflow:hidden;
}
.blur{
background-image:url("https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg");
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
height:100px;
filter: blur(10px);
}
<div class="parent">
<div class="inner"><div class="blur"></div></div>
</div>