相信大家都知道毛玻璃效果做的好的话,能使页面显得非常生动立体,整体效果非常好。果断火速入坑,总结出来一共有两种方法,下面一一介绍,把我的一些经验和大家分享分享。
第一种:通过CSS实现
现代先进的浏览器,普遍都支持这种方法,这也是两个方法里实现过程中最简单的,只是用到了 css 滤镜(filter)
中的 blur
属性。但是,你要利用CSS做一个好的毛玻璃效果,需要注意很多细节。
具体怎么做呢?你只需要给图片加上filter: blur(5px)
,其中,5px
代表图像的模糊度,数值越大,模糊的越厉害 。经过本人多次测试,当blur
的值在3px~10px
时,和刚手冲完的视觉效果类似 。
言归正传,你会发现css实现这种效果后,四周会有白边,具体如何修复,这里只给出一个建议。
首先,你要知道铺满全屏的背景和页面上的小图片的处理方法的不同的,对于页面上的小图片我们只需要给它的包含元素添加一个 overflow: hidden
就可以。
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.wrap {
height: 300px;
width: 450px;
margin: 20px auto;
float:left;
margin:20px
}
.wrap.s2 {
overflow: hidden;
}
.wrap img {
height: 300px;
width: 450px;
filter: blur(5px);
}
</style>
<div class="wrap s1"><img src="https://blog.zwying.com/usr/uploads/sina/63adb59b1ee38.jpg" alt=""></div>
<div class="wrap s2"><img src="https://blog.zwying.com/usr/uploads/sina/63adb59bc7ba2.jpg" alt=""></div>
效果如下
处理小图片的方式非常简单,但是这个方法在页面背景上却不生效,至于为什么我也不太清楚,不过我尝试了多次,只使用 overflow: hidden
并不能让页面的背景边缘变清晰。这时候就要使用 transform: scale()
扩大,但是使用这个属性需要注意的是,扩大的比例。如果你的图片不需要考虑细节,那么你可以把比例调大一点。如果图片细节比较重要,那么就要选择适当的比例,还要考虑在不同大小的屏幕上的效果。
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
width: 100%;
}
.cover {
height: 100%;
width: 100%;
background: url("https://blog.zwying.com/usr/uploads/sina/63adb59c14810.jpg");
background-size: cover;
filter: blur(5px);
transform: scale(1.02)
}
</style>
<div class="cover"></div>
利用css实现就说这么多,此外你要注意一点:
[redbar]由于兼容性问题,css滤镜效果有可能会失效,尤其在移动设备上,会耗费较大资源,导致页面卡顿。[/redbar]
第二种:利用js实现
前人栽树后人乘凉。利用前人已经实现的JS类库StackBlur.js
。这样高斯模糊效果不但非常理想,而且可以局部模糊图片。
具体使用方法可以参考官方的Github,这里不再详细赘述。
戳我直达
好康啊
又学习了