Blur filter в CSS

#html #css

как задать blur filter на чистом css div'у с background: url() только в пределах
другого div? 

Пример на фото, через filter: blur(10px) получаются нечёткие границы размытия


    

Ответы

Ответ 1

Оберните 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);
}