听得入迷

听得入迷

愿世界安康,愿你我皆好!
  • 分类数量4
  • 标签数量12
  • 文章数量112
  • 评论数量4
2021-11-30

简单CSS高斯模糊效果

#技术

简单CSS高斯模糊效果

我的主页

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

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

.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还有其他有趣属性可以去探索。

Comments