CSS如何实现这种背景效果

其实这个问题可以完全不需要使用js的，css3便可胜任。于是我阐述一下基本原理：1、模糊特效使用filter:blur；2、阴影效果使用box-shadow；3、镂空效果最简单的方法就是使用mask-image；4、透明层效果使用background-color: rgba()或opacity；5、防止模糊外漏使用overflow: hidden。

基本的层逻辑顺序是：
<背景层>
…<阴影层>
……<遮罩层>
………<模糊层>…模糊层必须和内容并列(因为层内元素都会被模糊)
………</模糊层>
………<透明层>…此处为最顶层内容
………</透明层>
……</遮罩层>
…</阴影层>
</背景层>

于是我写了一个比较简单的例子（如下图所示）：
// 知乎传图失败了N次，好纠结啊=_=|||  另外请无视背景图片的人物

效果就是上面这样的，遮罩我要讲一下，这里用的png图片，如下图所示：

这里遮罩图片是有讲究的，如果在PS中查看，白色部分是透明区域，黑色部分就是实色区域。也就是透明的部分即为挖空区域，支持渐变/虚化/外发光等的半透明使用（其实原理就是将RGBA的α透明通道提取叠加在了页面上），利用这个原理还可以做毛玻璃效果：

上图遮罩后得到如下效果：

作者：坑晨
链接：https://www.zhihu.com/question/39394958/answer/128849267
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

还有人会问，图片体积太大，而且浏览器放大页面了，虚化效果不就模糊了吗？这个不是问题，因为可以支持svg，只不过svg必须是黑白的，不能透明色，虚化过渡可以使用黑白过渡，半透明就是灰色的，具体使用方法我就不再展开了，大家自行谷歌吧。

补充说明与延伸
【1】楼主如果想实现窗体非固定位置要怎么办？（图片位置不确定了）
其实大家可以试试css3的cale()参数功能，类似于函数计算
当有数值填写的属性，例如width、height、top、left……就可以用到它，很强大哦
格式是 left: cale( ((100% - 50px)/2)*5 ) 这样的
100%是父项的宽度，支持加减乘除，但是加减符号前后务必要加空格
【2】镂空文字的阴影能不能也一起做出来呢？
答案是：当然可以了！我只不过是偷懒了而已，其实完全能做出来的，方法也有很多。我举个傻瓜一些的方法，你可以在那个镂空的位置上覆叠文字，文字颜色全透明，外加文字内阴影（text-shadow）
【3】为什么楼主图片的模糊区域变亮了？如何实现的？
这个太简单了，还是filter特效，这里我只是给大家演示了blur模糊的用法，其实楼主原图的效果还用了提高亮度/饱和度/对比度之类的特效，大家自行百度喽，filter效果非常丰富的。下面是我追加了filter: blur(5px) saturate(1.3) brightness(1.5); 的效果图：

简易代码：