CSS毛玻璃效果可以通过filter: blur()实现,类似PS高斯模糊,图片和背景都可以使用;但在移动端,会造成卡顿,不建议在移动端使用;
CSS:
.blur{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.jay{
width: 300px;
height: 180px;
}
.bg{
background: url(img/jay.jpg);
background-size: cover;
background-position: center;
}
HTML:
<!--背景模糊-->
<div class="jay bg blur"></div>
<!--原图-->
<div class="jay bg"></div>
<!--图片模糊-->
<div class="jay">
<img src="img/jay.jpg" class="blur" width="300"/>
</div>
效果如图(图片来自百度/周杰伦)