Страницы

Поиск по вопросам

воскресенье, 16 февраля 2020 г.

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); }


Комментариев нет:

Отправить комментарий