主页 / 技术卡片 / 正文

我的主页

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

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

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

更新于: 2022年01月22日 10:20
96
0
发表评论