如何用HTML、CSS实现Netflix导航栏顶部晕影效果及替代方案

你要的导航栏向下延伸的晕影效果参考如下：

原生CSS实现方案（和Netflix官方逻辑一致） #

不需要引入任何图片素材，纯CSS就能完美复现效果，性能拉满。
核心结构逻辑分三层：

• 最底层：全屏播放的背景视频，层级最低
• 中间层：固定在顶部的渐变晕影层，层级高于视频、低于导航内容
• 最上层：透明样式的导航栏，本身不设背景，直接透出下层的晕影效果

代码示例 #

HTML结构：

<!-- 全屏背景视频 -->
<video class="bg-video" autoplay muted loop playsinline>
  <source src="your-video-path.mp4" type="video/mp4">
</video>

<!-- 顶部晕影层 -->
<div class="top-vignette"></div>

<!-- 透明导航栏 -->
<nav class="global-nav">
  <!-- 导航内容：logo、菜单、用户入口等 -->
</nav>

对应CSS样式：

/* 背景视频基础样式 */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -2;
}

/* 晕影核心样式 */
.top-vignette {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 180px; /* 控制晕影向下延伸的范围，可根据需求调整 */
  z-index: -1;
  /* 从顶部纯黑向下渐变到全透明，模拟自然晕开的暗角效果 */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.55) 35%,
    rgba(0,0,0,0.25) 68%,
    rgba(0,0,0,0) 100%
  );
}

/* 透明导航栏样式 */
.global-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 68px;
  z-index: 10;
  background: transparent;
  display: flex;
  align-items: center;
  padding: 0 4%;
}

效果调整技巧 #

• 修改.top-vignette的height值，可以拉长/缩短晕影向下覆盖的距离
• 调整渐变中各节点的rgba透明度，可以适配不同亮度的背景视频，保证导航上的文字始终清晰
• 如果要做Netflix同款滚动交互：页面下滑一定距离后导航栏变成纯不透明深色，只需要加一段简单的滚动监听，给导航栏添加background: #141414的类名即可，晕影层可以在滚动后直接隐藏，过渡更自然。

实现方案效率对比 #

上述CSS线性渐变方案就是目前性能最优的实现，没有更高效的替代方案，常见其他方案的性能问题如下：

• 透明PNG图片做晕影：需要额外发起资源请求，高清屏适配成本高，渲染效率低于CSS渐变
• box-shadow内阴影模拟晕影：浏览器需要额外计算模糊扩散范围，滚动时重绘开销大，低端设备容易掉帧
• SVG/Canvas滤镜做晕影：滤镜计算占用GPU资源多，移动端流畅度差
  CSS线性渐变是浏览器原生做过渲染优化的属性，支持GPU加速，不会触发不必要的重排重绘，全端都能稳定保持60fps流畅度，也是Netflix官网实际在用的实现方式。

内容的提问来源于stack exchange，提问作者Sahil Singh