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

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

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

效果图

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

这是在之前临摹的一个微信小程序文章详情页模版,顶部渐变图片高斯模糊;之前想过两种方式实现:一种自己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控制渐变图片高斯模糊

案例

如果想一起折腾可以下载代码分析分析

下载地址:https://yinfengrui.lanzoub.com/iakVs02lp1qb

(4)
上一篇 03/10/2022
下一篇 04/21/2022

相关推荐

发表评论

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

评论列表(1条)

  • 123456
    123456 04/26/2022

    感谢大佬

星宿UI 官方文档上线:https://xs.frbkw.com/ 
自己画的banner插画开源下载:https://banner.frbkw.com/