网页中高斯模糊毛玻璃滤镜效果的实现

相信大家都知道毛玻璃效果做的好的话,能使页面显得非常生动立体,整体效果非常好。果断火速入坑,总结出来一共有两种方法,下面一一介绍,把我的一些经验和大家分享分享。

第一种:通过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>
HTML

效果如下

无模糊边

处理小图片的方式非常简单,但是这个方法在页面背景上却不生效,至于为什么我也不太清楚,不过我尝试了多次,只使用 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>
HTML

利用css实现就说这么多,此外你要注意一点:
[redbar]由于兼容性问题,css滤镜效果有可能会失效,尤其在移动设备上,会耗费较大资源,导致页面卡顿。[/redbar]

第二种:利用js实现

前人栽树后人乘凉。利用前人已经实现的JS类库StackBlur.js。这样高斯模糊效果不但非常理想,而且可以局部模糊图片。
具体使用方法可以参考官方的Github,这里不再详细赘述。
戳我直达

打赏
评论区
头像
  • 高兴
  • 小怒
  • 脸红
  • 内伤
  • 装大款
  • 赞一个
  • 害羞
  • 汗
  • 吐血倒地
  • 深思
  • 不高兴
  • 无语
  • 亲亲
  • 口水
  • 尴尬
  • 中指
  • 想一想
  • 哭泣
  • 便便
  • 献花
  • 皱眉
  • 傻笑
  • 狂汗
  • 吐
  • 喷水
  • 看不见
  • 鼓掌
  • 阴暗
  • 长草
  • 献黄瓜
  • 邪恶
  • 期待
  • 得意
  • 吐舌
  • 喷血
  • 无所谓
  • 观察
  • 暗地观察
  • 肿包
  • 中枪
  • 大囧
  • 呲牙
  • 抠鼻
  • 不说话
  • 咽气
  • 欢呼
  • 锁眉
  • 蜡烛
  • 坐等
  • 击掌
  • 惊喜
  • 喜极而泣
  • 抽烟
  • 不出所料
  • 愤怒
  • 无奈
  • 黑线
  • 投降
  • 看热闹
  • 扇耳光
  • 小眼睛
  • 中刀
  • 呵呵
  • 哈哈
  • 吐舌
  • 太开心
  • 笑眼
  • 花心
  • 小乖
  • 乖
  • 捂嘴笑
  • 滑稽
  • 你懂的
  • 不高兴
  • 怒
  • 汗
  • 黑线
  • 泪
  • 真棒
  • 喷
  • 惊哭
  • 阴险
  • 鄙视
  • 酷
  • 啊
  • 狂汗
  • what
  • 疑问
  • 酸爽
  • 呀咩爹
  • 委屈
  • 惊讶
  • 睡觉
  • 笑尿
  • 挖鼻
  • 吐
  • 犀利
  • 小红脸
  • 懒得理
  • 勉强
  • 爱心
  • 心碎
  • 玫瑰
  • 礼物
  • 彩虹
  • 太阳
  • 星星月亮
  • 钱币
  • 茶杯
  • 蛋糕
  • 大拇指
  • 胜利
  • haha
  • OK
  • 沙发
  • 手纸
  • 香蕉
  • 便便
  • 药丸
  • 红领巾
  • 蜡烛
  • 音乐
  • 灯泡
  • 开心
  • 钱
  • 咦
  • 呼
  • 冷
  • 生气
  • 弱
  • 阿鲁
  • 泡泡
    头像
    熊仔橡皮糖
      

    头像
    saky
      

    学习了,在大佬这学习(PY)了不少好东西

    头像
    蝉時雨
      

    毛玻璃效果虽好,但是用多了太耗资源,会导致页面卡顿,影响体验 ~~~

    头像
    乐心湖
      

    我却觉得很不好看唉