小程序背景图片模糊有白边怎么办?简单去除更好看!
2018-12-23 本文已影响1人
7db2b8912e6d
问题
最近在开发小程序的过程中,遇到了一个棘手的问题:
我背景用了一张图片,想做模糊效果,于是设置了filter: blur(20px);
模糊样式,代码如下:
对应的wxss样式如下:
但是,遇到了问题了:模糊的图片,有很明显的白边!
经过多次查询资料,发现不仅仅小程序,还包括网页、H5等使用css模糊图片的都会存在这个问题!
解决
于是一边实践一边编写测试,终于发现了去除背景图片模糊白边的办法,那就是:
背景图片加上transform: scale(1.2);
属性,这个属性的意思是:放大1.2倍
效果
好了,这下白边完全去除了!很好看,看看如下图片效果吧:
小程序背景模糊效果