纯CSS实现毛玻璃（高斯模糊）效果

实现效果图如下：

html 代码如下：

<div class="pro_item">
   <div class="item item1"></div>
   <div class="item item2"></div>
   <div class="item item3"></div>
   <div class="item item4"></div>
 </div>

css代码如下：

.pro_item {
	width: 100%;
	height: 100%;
	position: relative;
	background-image: url(/static/home.jpg);
	background-position: center top;
	background-size: cover;
}
.item {
	width: 2rem;
	height:3.2rem;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -200px;
	margin-left: -400px;
	overflow: hidden;
	z-index: 2;
	padding: 50px;
	box-sizing: border-box;
  padding-left:0;
  padding-right:0;
}
.item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-filter: blur(15px) brightness(1.5) grayscale(0.2) contrast(0.8);
	-moz-filter: blur(15px) brightness(1.5) grayscale(0.2) contrast(0.8);
	-ms-filter: blur(15px) brightness(1.5) grayscale(0.2) contrast(0.8);
	-o-filter: blur(15px) brightness(1.5) grayscale(0.2) contrast(0.8);
	filter: blur(15px) brightness(1.5) grayscale(0.2) contrast(0.8);
	z-index: -3;
	margin: -30px;
	background-image: url(/static/home.jpg);
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
}

.pro_item .item1{
  margin-left:-5.5rem;
  margin-top:1.2rem;
}
.pro_item .item2{
  margin-left:-2.5rem;
  margin-top:1.2rem;
}
.pro_item .item3{
  margin-left:0.5rem;
  margin-top:1.2rem;
}
.pro_item .item4{
  margin-left:3.5rem;
  margin-top:1.2rem;
}

注释：
巧用filter属性：原本blur(px)就可以达到高斯模糊的效果，但是UI小姐姐给的设计稿是在白底上面增加的高斯模糊，用css实现的高斯模糊其实已经设置了div的背景为图片，所以不能在白色背景的基础上进行高斯模糊，这就造成出来的效果和背景图片的色调比较接近。哭哭(ノへ￣、)，好在filter属性可以叠加滤镜效果，本可爱(/ω＼)在blur的基础上增加了brightness、grayscale和contrast，微调它们的值，以达到设计稿的效果。

---

更新～
这么快就被我找到新的解决方法啦(๑•̀ㅂ•́)و✧，看来还是因为自己的知识储备不够哇，要多多看书哦┑(￣Д ￣)┍
css部分.item::before修改为：

.item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	-webkit-filter: blur(12px);
	-moz-filter: blur(12px);
	-ms-filter: blur(12px);
	-o-filter: blur(12px);
	filter: blur(12px);
	z-index: -3;
	margin: -30px;
	background: url(/static/home.jpg), rgba(255,255,255,0.25);
  background-blend-mode: screen;
	background-attachment: fixed;
  background-position: center top;
	background-size: cover;
}

使用了css3的新属性background-blend-mode，混合背景图片和背景色，就能完美还原UI小姐姐的设计稿啦～，filter也不用叠加那么多，进行微调一下就OK，哈哈✧(≖ ◡ ≖✿)，CSS还是有很多需要我去发现探索的地方呢！