css利用高斯模糊实现背景虚拟化

以图片①为背景虚拟成为②

• CSS使用filter: blur(20px);实现高斯模糊效果，周边会出现扩展的白边；
• overflow: hidden; 防止高斯模糊引起的扩散
• transform: scale(1.5);解决因为高斯模糊引起的白边
• 注意： 元素被高斯模糊以后，其所有的子元素都会被模糊

.father {
    position: relative;
    // 防止高斯模糊引起的扩散
    overflow: hidden;
    .bg {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50%;
      -webkit-filter: blur(20px);
      // css高斯模糊
      filter: blur(20px);
      -webkit-transform: scale(1.5);
      -ms-transform: scale(1.5);
      // 解决因为高斯模糊引起的白边
      transform: scale(1.5);
    }
  }