微信小程序文章详情页模版——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

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

相关推荐

发表回复

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

评论列表(6条)

  • one
    one 07/27/2022

    我111

  • 大柏
    大柏 06/22/2022

    哥哥哥,相关文章打不开

  • Ken
    Ken 06/21/2022

    测试

  • Pink04
    Pink04 06/18/2022

    测试问题

  • 123456
    123456 04/26/2022

    感谢大佬