我們在做小程序開發(fā)過程中，有時候會遇到這樣的需求，用一張圖片做全屏幕背景圖。
并且實(shí)現(xiàn)毛玻璃效果（高斯模糊），今天就來帶大家一步步的實(shí)現(xiàn)這個效果

創(chuàng)新互聯(lián)是一家企業(yè)級云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營經(jīng)驗(yàn)。主營GPU顯卡服務(wù)器，站群服務(wù)器，四川主機(jī)托管，海外高防服務(wù)器，大帶寬服務(wù)器，動態(tài)撥號VPS，海外云手機(jī)，海外云服務(wù)器，海外服務(wù)器租用托管等。

老規(guī)矩，先看效果圖

• 1，用網(wǎng)絡(luò)圖片實(shí)現(xiàn)
  
• 2，用本地圖片實(shí)現(xiàn)
  
  通過上面兩張圖可以看出來，我們既可以用網(wǎng)絡(luò)圖片來實(shí)現(xiàn)高斯模糊，有可以用本地圖片來實(shí)現(xiàn)。

一，先來用本地圖片做全屏背景

• 1，先在wxml文件里引入本地圖片
  
• 2，然后設(shè)置wxss樣式
  通過下圖幾段樣式代碼，就可以輕松實(shí)現(xiàn)全屏背景
  
  這個圖片大家應(yīng)該熟悉吧，這是石頭哥的頭像。原本是哥正方形，我們要想實(shí)現(xiàn)全屏背景，就要用到下面這幾行代碼了。

  .gaoshi-bendi {
  /* 這一步設(shè)置是關(guān)鍵設(shè)置 */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  }

  這樣我們就實(shí)現(xiàn)了全屏背景（圖片背景）了，接下來我們來做模糊效果

  二，實(shí)現(xiàn)模糊效果

  這里主要用到了 CSS3的 filter(濾鏡) 屬性
  
  通過上面這張圖和下面這張圖對比，可以看到filter的值越大越模糊。
  
  這樣我們就輕松的實(shí)現(xiàn)了本地圖片的高斯模糊效果。
  但是有時候我們不僅僅是用到本地圖片，我們還需要用到網(wǎng)絡(luò)圖片。那這時候該怎么辦呢？

三，網(wǎng)絡(luò)圖片實(shí)現(xiàn)高斯模糊效果

• 1，不管是本地圖片還是網(wǎng)絡(luò)圖片，首先我們還是要讓圖片做全局拉伸。
  
  原圖長這樣，可以看到我們做全屏背景的時候把這個圖片從中間裁剪拉伸了
  background屬性里的 center/cover起了主要作用。
  

• 2，然后就是用filter做模糊效果了
  

到這里我們小程序就輕松的實(shí)現(xiàn)高斯模糊效果了。是不是很簡單。
今天就到這里了，后面我還會分享更多小程序相關(guān)的知識出來。請持續(xù)關(guān)注。

文章題目：小程序?qū)崿F(xiàn)全屏幕高斯模糊背景圖
文章出自：http://jinyejixie.com/article18/johsgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、App開發(fā)、網(wǎng)站內(nèi)鏈、企業(yè)建站、網(wǎng)站排名、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)