css3 背景模糊属性 背景滤镜 backdrop-filter

设计问我前端能否实现背景模糊的遮罩效果，我想我们应该感谢那些强大的css3开发者们，因为他们的努力才使得我恰好知道这个属性：

	backdrop-filter: blur(8px);

翻译理解记忆法仅供参考：背景幕布-过滤器 : 模糊(像素)

backdrop-filter与filter的区别

filter：模糊内容
backdrop-filter:透过该层的底部元素模糊化

防止透过遮罩层内容过暗，配合了saturate(150%)使用，意为使…饱和，类似ps饱和度效果，<100%变暗，>100%变亮

	backdrop-filter:saturate(150%) blur(8px);
	-webkit-backdrop-filter:saturate(150%) blur(8px);
	background-color:rgba(0,0,0,.3);

防止透过遮罩层内容色彩过杂，配合contrast(50%)使用，意为对比，类似ps对比度，100%为原图，0%为全灰色图像

backdrop-filter:saturate(150%) contrast(50%) blur(8px);
-webkit-backdrop-filter:saturate(150%) contrast(50%) blur(8px);
background-color:rgba(0,0,0,.3);