我来到这个世界上,不是为了考清华北大拼命卷,而是来看花怎么开,水怎么流,太阳怎么升起,夕阳何时落下,经历有趣的事,遇见难忘的人

微信小程序文章详情页模版——CSS控制渐变图片高斯模糊插图

 

效果图

微信小程序文章详情页模版——CSS控制渐变图片高斯模糊插图1

 

这是在之前临摹的一个微信小程序文章详情页模版,顶部渐变图片高斯模糊;之前想过两种方式实现:一种自己ps做好图片后在小程序中使用,另外一种做好一个高斯模糊透明的图层在小程序上叠加;

最后想着是否可以使用css实现呢?

如果用css来实现等于可以不用做图片,在体积上可以节约几KB;相反在图片上得定位一张渐变高斯模糊,总之就是为了折腾

 

CSS渐变模糊

如果使用css控制模糊,我们需要在容器样式先满足高斯模糊

backdrop-filter: blur(18px);

在添加一个渐变背景图层控制不同渐变属性

background-image: linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(150, 150, 150, 0.1) 20%,
      rgba(255, 255, 255, 0.2) 40%,
      rgba(255, 255, 255, 0.6) 60%,
      rgb(255, 255, 255) 100%);
}

最后将该样式定位叠加在图片容器上

微信小程序文章详情页模版——CSS控制渐变图片高斯模糊插图2

发表评论

您的电子邮箱地址不会被公开。