Small program to achieve full-screen Gaussian blur background

We are a small program development process, sometimes encounter such a demand, do full-screen background with a picture.
And achieve frosted glass effect (Gaussian Blur), today to take you step by step to achieve this effect

Old rules, look at the effect of FIG.

• 1, implemented by Network Graphics
  
• 2, using local images to achieve
  
  can be seen by the above two pictures, we can either use the network to achieve Gaussian blur the picture, there can be realized with the local picture.

First, the first to do full-screen background picture with the local

• 1, first introduced in the local image file wxml
  
• 2, and then set wxss styles
  by paragraphs following figure style code, you can easily achieve full-screen background of
  
  this image you should be familiar with it, this is the stone brother's head. Columbia was originally square, we are to achieve full-screen background, we must use the following lines of code.

  .gaoshi-bendi {
  /* 这一步设置是关键设置 */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  }

  So that we achieve the full-screen background (background pictures), then we do blur

  Second, to achieve blur

  Here the main use of the CSS3 filter (filter) property
  
  by above image contrast and picture below can be seen the value of the filter larger and more blurred.
  
  So we easily realize the local picture a Gaussian blur.
  But sometimes we just use local images, we also need to use the network picture. Well, this time how to do it?

Third, the network to achieve a Gaussian blur pictures

• 1, whether local or network picture pictures, first of all we want to do a global picture stretch.
  
  Original long way, you can see a full-screen background when we do put this image cropped from the middle stretch of the
  background property in the center / cover played a major role.
  

• 2, then it is to do with the blurring effect of the filter
  

Here we have a small program to easily achieve the Gaussian blur effects. Is not it simple.
Here today, and I will be back to share knowledge related to the program out of more small. Stay tuned.