侧边栏壁纸
博主头像
听得入迷博主等级

走一走看一看

  • 累计撰写 116 篇文章
  • 累计创建 20 个标签
  • 累计收到 7 条评论

目 录CONTENT

文章目录

简单CSS高斯模糊效果

听得入迷
2021-11-30 / 0 评论 / 0 点赞 / 88 阅读 / 226 字

我的主页

本次又修改了一下我的主页,用上模糊背景显得高级一点。

模糊背景比较简单(简陋)的用法。直接把这个样式用到某个元素上就行了

.blur{
background-color: #ffffffcc;
backdrop-filter: brightness(100%) saturate(300%) blur(20px);
}

或者这个

.blur{
background-color: #ffffffcc;
-webkit-backdrop-filter: saturate(3) blur(20px);
backdrop-filter: saturate(3) blur(20px);
}

backdrop-filter: brightness(100%) saturate(150%) blur(10px);

让这个有效的前提是元素背景至少半透明

  1. brightness(100%):画面亮度,可以超过100%,根据情况调节即可。

  2. saturate(150%):饱和度,想要视觉效果更好,可以着重调节这个值

  3. blur(10px):模糊程度,单位是px

当然可以不填单位,不填的话数值大小和填不同,例如saturate(200%)相当于saturate(2),backdrop-filter还有其他有趣属性可以去探索。

0

评论区