小程序实现全屏幕高斯模糊背景图

简介: 小程序实现全屏幕高斯模糊背景图

我们在做小程序开发过程中,有时候会遇到这样的需求,用一张图片做全屏幕背景图。

并且实现毛玻璃效果(高斯模糊),今天就来带大家一步步的实现这个效果


老规矩,先看效果图


1,用网络图片实现

2,用本地图片实现

通过上面两张图可以看出来,我们既可以用网络图片来实现高斯模糊,又可以用本地图片来实现。


一,先来用本地图片做全屏背景


1,先在wxml文件里引入本地图片



2,然后设置wxss样式
通过下图几段样式代码,就可以轻松实现全屏背景



这个图片大家应该熟悉吧,这是石头哥的头像。原本是个正方形,我们要想实现全屏背景,就要用到下面这几行代码了。

.gaoshi-bendi {
  /* 这一步设置是关键设置 */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

这样我们就实现了全屏背景(图片背景)了,接下来我们来做模糊效果


# 二,实现模糊效果


这里主要用到了 CSS3的 filter(滤镜) 属性



通过上面这张图和下面这张图对比,可以看到filter的值越大越模糊。



这样我们就轻松的实现了本地图片的高斯模糊效果。

但是有时候我们不仅仅是用到本地图片,我们还需要用到网络图片。那这时候该怎么办呢?


三,网络图片实现高斯模糊效果


1,不管是本地图片还是网络图片,首先我们还是要让图片做全局拉伸。



原图长这样,可以看到我们做全屏背景的时候把这个图片从中间裁剪拉伸了
background属性里的 center/cover起了主要作用。



2,然后就是用filter做模糊效果了



到这里我们小程序就轻松的实现高斯模糊效果了。是不是很简单。

相关文章
|
6月前
|
算法 BI 计算机视觉
图像处理之积分图应用一(半径无关的快速模糊算法)
图像处理之积分图应用一(半径无关的快速模糊算法)
50 0
Photoshop怎么实现图片局部马赛克
Photoshop怎么实现图片局部马赛克
102 0
|
前端开发 JavaScript
神奇的滤镜!巧妙实现内凹的平滑圆角
神奇的滤镜!巧妙实现内凹的平滑圆角
292 0
神奇的滤镜!巧妙实现内凹的平滑圆角
|
并行计算 前端开发 数据可视化
【视觉基础篇】11 # 图案生成:如何生成重复图案、分形图案以及随机效果?
【视觉基础篇】11 # 图案生成:如何生成重复图案、分形图案以及随机效果?
204 0
【视觉基础篇】11 # 图案生成:如何生成重复图案、分形图案以及随机效果?
|
算法 图形学
【计算机图形学】实验四:线段裁剪
【计算机图形学】实验四:线段裁剪
137 0
【计算机图形学】实验四:线段裁剪
|
并行计算 iOS开发 MacOS
Metal每日分享,高斯双边模糊滤镜效果
Metal每日分享,高斯双边模糊滤镜效果
Metal每日分享,高斯双边模糊滤镜效果
|
编解码 数据库
LabVIEW色彩匹配实现颜色识别、颜色检验(基础篇—13)
LabVIEW色彩匹配实现颜色识别、颜色检验(基础篇—13)
LabVIEW色彩匹配实现颜色识别、颜色检验(基础篇—13)
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
1014 0
Halcon标定系列(5):4点标定之眼在手外项目实践,已知仿射变换矩阵,计算得到旋转角度和缩放因子等参数
|
编解码
图片的变形与模糊,是两回事
图片的变形与模糊,是两回事
137 0
|
资源调度 算法 Java
Android图像处理 - 高斯模糊的原理及实现
原文:Android图像处理 - 高斯模糊的原理及实现 欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 由 天天P图攻城狮 发布在云+社区 作者简介:damonxia(夏正冬),天天P图Android工程师 前言 高斯模糊是图像处理中几乎每个程序员都或多或少听过的名词,但是对其原理大家可能并不了解,只知道通过高斯模糊能实现图像毛玻璃效果。
2251 0

热门文章

最新文章