小程序實現全屏幕高斯模糊背景圖

咱們在作小程序開發過程當中，有時候會遇到這樣的需求，用一張圖片作全屏幕背景圖。
而且實現毛玻璃效果（高斯模糊），今天就來帶你們一步步的實現這個效果

老規矩，先看效果圖

• 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作模糊效果了
  

到這裏咱們小程序就輕鬆的實現高斯模糊效果了。是否是很簡單。
今天就到這裏了，後面我還會分享更多小程序相關的知識出來。請持續關注。