跳到主要内容

导航栏透视背景设置

导航栏有一种流行的做法是设置一定的透明度背景，滚动时让处于底下的内容有种透视模糊的效果。

这里需要用到两个核心的 CSS 属性 backdrop-filter 和 background-image：

信息

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

正常的模糊效果​

通过给导航栏的背景设置白色，添加一点透明度，透明度的值推荐在 0.7 ~ 0.9 的范围内。这时的模糊效果最佳。

此时看到的效果就跟你冬天带着眼镜吃火锅、从寒冷的室外突然走进温暖的室内一样。🧐

https://spacexcode/docs/demo/nav-bg
Logo

标题部分

正文开始。。。

为了演示导航透明背景的设置，我写了这篇文章，力求让所有人都能明白其中的原理。

  • 写完 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 代替：

当透明的区域与下面内容区域重合时就能看到显露的部分，再配合多重滤镜。🔍

https://spacexcode/docs/demo/nav-bg
Logo

标题部分

正文开始。。。

为了演示导航透明背景的设置，我写了这篇文章，力求让所有人都能明白其中的原理。

  • 写完 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);
}
成为赞助商