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

2019-12-17 13:03| 发布者: |





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

这样咱们就完成了全屏布景了,接下来咱们来做含糊作用

这儿首要用到了 CSS3的 filter 特点

经过上面这张图和下面这张图比照,能够看到filter的值越大越含糊。

这样咱们就轻松的完成了本地凯发娱乐app图片的高斯含糊作用。
可是有时分咱们不仅仅是用到本地图片,咱们还需要用到网络图片。那这时分该怎么办呢?






1,不管是本地图片仍是网络图片,首要咱们仍是要让图片做大局拉伸。

原图长这样,能够看到咱们做全屏布景的时分把这个图片从中心裁剪拉伸了
background特点里的 center/cover起了首要作用。






到这儿咱们小程序就轻松的完成高斯含糊作用了。是不是很简单。
今日就到这儿了,后边我还会共享更多小程序相关的常识出来。请继续重视。


<
>
关于我们
AB模版网成立于2014年,我们是一家专注用户体验设计开发与互联网品牌建设的设计公司,创立至今为2000多位客户提供了创新与专业的设计方案。设计服务范围包括:交互原型设计、产品视觉设计、网站设计与开发建设、移动及软件产品界面设计、图标设计、品牌及平面设计等。

联系我们

13588889999服务时间:9:00-18:00)

admin@adminbuy.cn

官方微信官方微信

部门热线

前   台:13588889999
业务部:13588889999
客服部:13588889999
技术部:13566667777
人事部:13566667777

咨询电话13588889999 返回顶部
返回顶部