最近在写活动页面遇到一个效果，在黑色透明蒙层后面的元素要有模糊，毛玻璃的效果，最初想到的就是 filter: blur(2px) ，直接在元素上使用，但是整个子元素都被模糊了，而且蒙层的背景并没有效果，经过百般搜索和尝试，发现还有一个属性可以实现专门针对有透明度的元素做模糊的效果，而且还不会影响到子元素的展示，它就是 backdrop-filter: blur(3px) ，完美的实现了设计稿的要求。
下面就来看看这两个属性的区别，遇到的问题以及解决方案。
filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。
想要模糊图像或者某个不带透明度的元素，可以直接在元素上加 filter: blur(2px) ，如果这个元素下面有子元素，这样写子元素也会被模糊，解决方法是使用伪元素加定位效果实现：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
所以给蒙层的后面添加模糊的效果，可以直接在蒙层元素上使用 backdrop-filter: blur(2px)即可。
这两个属性的使用可以详细的参考 mdn上的描述：
backdrop-filter
filter
一、高斯模糊是使用ps等工具实现的，方法如下（以ps为例）：
1、在ps中打开背景图；
2、点击菜单栏中的滤镜；
3、点击模糊，再选择高斯模糊，如图；
5、通过调整半径来调整模糊的强度（半径越大越模糊），如图：
二、全屏显示的css代码：
.bg {
background-image:url(scale.jpg)
-moz-background-size: 100% 100%/* Firefox 3.6 */
-o-background-size: 100% 100%/* Opera 9.5 */
-webkit-background-size: 100% 100%/* Safari 3.0 */
background-size: 100% 100%/* Firefox 4.0 and other CSS3-compliant browsers */
-moz-border-image: url(scale.jpg) 0/* Firefox 3.5 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale')/* for <ie9 */
}
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{display: blockwidth: 200pxheight: 200pxposition: relative}
img{width: 200pxheight: 200px}
div{background: #111111z-index: 999width: 200pxheight: 200pxposition: absolutetop: 8pxopacity: 0}
</style>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("div").hover(function(){
$("div").css("opacity","0.2")
$("img").css("opacity","0.65")
},function(){
$("div").css("opacity","0")
$("img").css("opacity","1")
})
})
</script>
</head>
<body>
<a href=""><img src="../img/1.jpg"/></a><div></div>
自己换一张图片，导入jQuery.min的开发库
</body>
</html>
