导航栏透视背景设置
导航栏有一种流行的做法是设置一定的透明度背景，滚动时让处于底下的内容有种透视模糊的效果。
这里需要用到两个核心的 CSS 属性 backdrop-filter 和 background-image：
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。
因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
正常的模糊效果
通过给导航栏的背景设置白色，添加一点透明度，透明度的值推荐在 0.7 ~ 0.9 的范围内。这时的模糊效果最佳。
此时看到的效果就跟你冬天带着眼镜吃火 锅、从寒冷的室外突然走进温暖的室内一样。🧐
标题部分
正文开始。。。
为了演示导航透明背景的设置，我写了这篇文章，力求让所有人都能明白其中的原理。
- 写完 html 标签结构
- CSS 实现样式
- 特效动作
当你滚动时，内容处于导航栏的底部是，仔细观察导航栏显示变化
设置 backdrop-filter 属性
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
在来点内容撑开，显示出纵向的滚动条
console.log("hello world").nav-wrapper {
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: saturate(50%) blur(4px);
-webkit-backdrop-filter: saturate(50%) blur(4px);
}
带像素点镂空效果
原理是设置间隔透明的网格背景，这里为了演示效果，将透明区域用色值 #ebedf0 代替：
当透明的区域与下面内容区域重合时就能看到显露的部分，再配合多重滤镜。🔍
标题部分
正文开始。。。
为了演示导航透明背景的设置，我写了这篇文章，力求让所有人都能明白其中的原理。
- 写完 html 标签结构
- CSS 实现样式
- 特效动作
当你滚动时，内容处于导航栏的底部是，仔细观察导航栏显示变化
设置 backdrop-filter 属性
backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
在来点内容撑开，显示出纵向的滚动条
console.log("hello world").nav-wrapper {
background-image: radial-gradient(transparent 1px, #fff 1px);
background-size: 4px 4px;
backdrop-filter: saturate(50%) blur(4px);
-webkit-backdrop-filter: saturate(50%) blur(4px);
}