1. 程式人生 > >使用filter: blur() 的時候解決圖片周圍泛白和容器外範圍變模糊的問題

使用filter: blur() 的時候解決圖片周圍泛白和容器外範圍變模糊的問題

.cn lur overflow -1 隱藏 http scale img filter

技術分享

類似於這種,這個時候出現了周圍變模糊,並且邊緣泛白的情況

周圍模糊這個問題很好解決,給父容器加overflow:hidden;就可以了

技術分享

效果如上,至於周圍泛白的問題就需要動點腦筋了,給目標添加 transform: scale(1.2); 放大為原來的1.2倍,這樣泛白的部分就可以隱藏起來看不見了。

技術分享

最終效果

使用filter: blur() 的時候解決圖片周圍泛白和容器外範圍變模糊的問題