css3中有属性filter专门去处理一些滤镜效果, 其中 blur(20px)代表高斯模糊(20px代表20个像素点混合) .

如果想实现下图效果则需要用点非常规的办法

上图实现方法是 背景图+中间磨砂的图片+ 弹出内容

body内标签

  <div class="container">
    <div class="content">
      <h1>弹出信息</h1>
      <p>巴拉巴拉巴拉巴拉</p>
    </div>
  </div>

css代码

* {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 100vw;
      height: 100vh;
      position: relative;
      background: url('http://qn.fengyitong.name/1.jpg') center / cover fixed;
      /* 
      上面拆分开来的写法
      background-image: url('http://qn.fengyitong.name/1.jpg'); 
      background-attachment: fixed;
      background-size: cover;
      background-position: center; */
    }

    .content {
      position: absolute;
      left: 50%;
      top: 30%;
      margin-left: -150px;
      width: 300px;
      height: 300px;
      background: hsla(0, 0%, 100%, 0.3);
    }

    .content::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      filter: blur(20px); /* 对于中间的内容部分的背景进行高斯模糊 */
      background: url('http://qn.fengyitong.name/1.jpg') center / cover fixed;
      z-index: -1;    /* 让模糊部分背景置于内容后方 */
      margin: -30px; /* 保证边缘部分进行高斯模糊 */
    }

    .content {
      overflow: hidden; /* 超出的部分隐藏(模糊部分margin会导致超出) */
      z-index: 1; /* 让模糊部分背景置于内容前方 */
    }

以上可以实现一个全屏的背景+中间磨砂效果,但是如果说我们想要一个非全屏的背景,中间磨砂效果的话(即container的宽高不是满屏),这个css要如何做出这效果我没想到,想到最简单的办法可能是要用canvas去辅助实现生成背景图片.后面如果有时间的话我再补上这块的js代码.