我們在做小程序開發過程中,有時候會遇到這樣的需求,用一張圖片做全屏幕背景圖。
並且實現毛玻璃效果(高斯模糊),今天就來帶大家一步步的實現這個效果老規矩,先看效果圖
- 1,用網絡圖片實現
- 2,用本地圖片實現
通過上面兩張圖可以看出來,我們既可以用網絡圖片來實現高斯模糊,有可以用本地圖片來實現。
一,先來用本地圖片做全屏背景
- 1,先在wxml文件裏引入本地圖片
- 2,然後設置wxss樣式
通過下圖幾段樣式代碼,就可以輕鬆實現全屏背景
這個圖片大家應該熟悉吧,這是石頭哥的頭像。原本是哥正方形,我們要想實現全屏背景,就要用到下面這幾行代碼了。.gaoshi-bendi { /* 這一步設置是關鍵設置 */ position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; }
這樣我們就實現了全屏背景(圖片背景)了,接下來我們來做模糊效果
二,實現模糊效果
這裏主要用到了 CSS3的 filter(濾鏡) 屬性
通過上面這張圖和下面這張圖對比,可以看到filter的值越大越模糊。
這樣我們就輕鬆的實現了本地圖片的高斯模糊效果。
但是有時候我們不僅僅是用到本地圖片,我們還需要用到網絡圖片。那這時候該怎麼辦呢?
三,網絡圖片實現高斯模糊效果
-
1,不管是本地圖片還是網絡圖片,首先我們還是要讓圖片做全局拉伸。
原圖長這樣,可以看到我們做全屏背景的時候把這個圖片從中間裁剪拉伸了
background屬性裏的 center/cover起了主要作用。 - 2,然後就是用filter做模糊效果了
到這裏我們小程序就輕鬆的實現高斯模糊效果了。是不是很簡單。
今天就到這裏了,後面我還會分享更多小程序相關的知識出來。請持續關注。