CSS: filter: blur(); 實現高斯模糊效果,不可不知的細節優化
前言
在專案中,要實現如下的效果:
頁面頂部的設計稿,前面一個卡片式的輪播,後邊的背景(是橢圓的一部分)取前面的圖片,進行一個高斯模糊的處理。
開始
前面的輪播部分,使用了第三方的輪播外掛,非常好用,推薦給大家(地址)。輪播,不作為今天的主要內容,暫時簡單描述下,有機會再詳細講解。有興趣的同學可以自己試一試,根據外掛提供的功能,進行一些樣式調整即可。
現在開始分析後面背景的實現方式,最開始考慮的是使用一個div,給div設定背景圖片,設定div的width、height以及border-radius屬性,達到橢圓的效果。
實踐
1. 使用背景圖片的實現方式
HTML:
<div class="head"> <div class="bg"></div> </div>
CSS:
.bg{
/* 設定相對定位 */
position: relative;
/* 寬度120%,-10%讓元素集中 */
left: -10%;
/* 為了實現橢圓效果 */
width: 120%;
height: 132px;
/* 只設置左下角和右下角的圓角 */
border-radius: 0 0 80% 80%;
/* 設定高斯模糊 */
filter: blur(20px);
/* 背景圖片 */
background: url('/static/demo.jpg') center;
background-size: cover;
}
效果圖:
可以看到filter: blur(20px);設定模糊效果後, 在橢圓區域的邊緣,有一些擴充套件的白邊。(可以試試矩形的div, 效果會更明顯)
解決方式:給div的父元素新增overflow: hidden;
CSS:
.head{
overflow: hidden;
height: 132px;
}
效果圖:
可以看到div底邊的模糊效果已經沒有了,限制了div的顯示大小,但是沒有實現想要的橢圓效果。兩邊的圓弧還是有很明顯的擴充套件效果。
2. 綜上,使用背景圖片的方式無法實現想要的效果。在知乎上看到一個優秀的回答(原文),參考裡面的例項,可以實現。
實現方案: 外層一個div設定為橢圓形狀,控制內層img可顯示的區域。圖片和形狀用兩個元素分開控制。
HTML:
<div class="bg"> <img src="/static/demo.jpg" class="test-img"> </div>
CSS:
/* 外層橢圓形狀,內層圖片只能在橢圓區域展示 */
.bg{
position: relative;
left: -10%;
width: 120%;
height: 130px;
border-radius: 0 0 80% 80%;
overflow: hidden;
}
/* 內層顯示的圖片 */
.bg img{
width: 100%;
height: 100%;
filter: blur(20px);
overflow: hidden;
}
效果圖:
Bingo! 完美實現想要的效果啦! O(∩_∩)O~~
總結
1. CSS使用filter: blur(20px);實現高斯模糊效果,周邊會出現擴充套件的白邊;
解決方案: 對父元素設定overflow: hidden; 隱藏即可。
2. 對於複雜的頁面結構,可以考慮使用多個元素實現;不要侷限於樣式,從結構上分析問題。
如果你有什麼疑問或想法,歡迎留言評論,或者掃描下方二維碼,與我取得聯絡~