我们在做小程序开发过程中,有时候会遇到这样的需求,用一张图片做全屏幕背景图。
并且实现毛玻璃效果(高斯模糊),今天就来带大家一步步的实现这个效果
老规矩,先看效果图
- 1,用网络图片实现
![8e1cda54eeba18c7c50d7d2c72e676ed.png](https://img-blog.csdnimg.cn/img_convert/8e1cda54eeba18c7c50d7d2c72e676ed.png)
- 2,用本地图片实现
![a72ff8622b52e488bdaa01932c2c5d2a.png](https://img-blog.csdnimg.cn/img_convert/a72ff8622b52e488bdaa01932c2c5d2a.png)
通过上面两张图可以看出来,我们既可以用网络图片来实现高斯模糊,有可以用本地图片来实现。
一,先来用本地图片做全屏背景
- 1,先在wxml文件里引入本地图片
![78a6b353c860af5de9d14f8573d1074e.png](https://img-blog.csdnimg.cn/img_convert/78a6b353c860af5de9d14f8573d1074e.png)
- 2,然后设置wxss样式
通过下图几段样式代码,就可以轻松实现全屏背景
![d00a2d4185f977ff99db6da8b633dde4.png](https://img-blog.csdnimg.cn/img_convert/d00a2d4185f977ff99db6da8b633dde4.png)
这个图片大家应该熟悉吧,这是石头哥的头像。原本是哥正方形,我们要想实现全屏背景,就要用到下面这几行代码了。
.gaoshi-bendi {
/* 这一步设置是关键设置 */
position: absolute;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
这样我们就实现了全屏背景(图片背景)了,接下来我们来做模糊效果
二,实现模糊效果
这里主要用到了 CSS3的 filter(滤镜) 属性
![3faf54461126aa592291f62c8a7bca48.png](https://img-blog.csdnimg.cn/img_convert/3faf54461126aa592291f62c8a7bca48.png)
通过上面这张图和下面这张图对比,可以看到filter的值越大越模糊。
![4df551515577935d9bc4d51ed6f69228.png](https://img-blog.csdnimg.cn/img_convert/4df551515577935d9bc4d51ed6f69228.png)
这样我们就轻松的实现了本地图片的高斯模糊效果。
但是有时候我们不仅仅是用到本地图片,我们还需要用到网络图片。那这时候该怎么办呢?
三,网络图片实现高斯模糊效果
- 1,不管是本地图片还是网络图片,首先我们还是要让图片做全局拉伸。
![7cd813d6df3ff7e80770113000bf609b.png](https://img-blog.csdnimg.cn/img_convert/7cd813d6df3ff7e80770113000bf609b.png)
原图长这样,可以看到我们做全屏背景的时候把这个图片从中间裁剪拉伸了
background属性里的 center/cover起了主要作用。
![7b8652ec9f9f338eedfe07ab93e56600.png](https://img-blog.csdnimg.cn/img_convert/7b8652ec9f9f338eedfe07ab93e56600.png)
- 2,然后就是用filter做模糊效果了
![4777fdc72373044ee6b89ebf880cda23.png](https://img-blog.csdnimg.cn/img_convert/4777fdc72373044ee6b89ebf880cda23.png)
到这里我们小程序就轻松的实现高斯模糊效果了。是不是很简单。
今天就到这里了,后面我还会分享更多小程序相关的知识出来。请持续关注。