HTML5本身无内置渐变遮罩滤镜，顶部导航栏透明度过渡效果需通过CSS线性渐变+rgba背景色分层实现：用background-image: linear-gradient(to bottom, transparent, rgba(255,255,255,0.2))控制渐变，background-color: rgba(255,255,255,0)作回退，配合backdrop-filter: blur(8px)可增强毛玻璃感，滚动响应则需JS切换预设类。
HTML5 本身没有“渐变遮罩滤镜”这个内置能力，所谓顶部导航栏的“透明度过渡渐变遮罩”，实际是分层实现的视觉效果：用线性渐变控制背景透明度变化 + CSS 合成逻辑（或 SVG/canvas 遮罩）来限定渐变作用范围。关键不是加滤镜，而是组合 background-image、rgba 背景色与合成层级。
用 CSS 线性渐变 + rgba 背景色实现基础过渡
这是最轻量、兼容性最好、也最符合“顶部导航栏”场景的做法：
- 不要用
opacity，它会让文字和图标一起变淡；改用background-color: rgba(255,255,255,0.1)控制背景自身透明度 - 渐变必须通过
background-image: linear-gradient()实现，例如从上到下由完全透明过渡到半透明白：background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.2)); - 搭配一个底层 fallback 色：
background-color: rgba(255,255,255,0);（初始全透明）
这样即使渐变不渲染，背景仍可控 - 加上
transition: background-image 0.4s ease, background-color 0.4s ease;，确保滚动切换时平滑
用 backdrop-filter + 渐变模拟“毛玻璃遮罩感”
如果希望导航栏呈现半透+模糊的现代质感（类似 iOS 毛玻璃），可叠加 backdrop-filter：
- 确保导航栏是固定定位（
position: fixed或position: sticky），且下方有内容可被“透过” - 添加：
backdrop-filter: blur(8px);<br>-webkit-backdrop-filter: blur(8px);<br>background-image: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1));
- 注意：iOS Safari 15+、Chrome 97+ 支持良好，旧版需降级为纯 rgba 渐变
- 避免在透明状态下丢失视觉锚点——加一条极细边框：
border-bottom: 1px solid rgba(0,0,0,0.05);
滚动中动态调节渐变强度（JS 驱动）
纯 CSS 无法读取滚动位置，必须靠 JavaScript 切换预设类来驱动渐变变化：
- 定义两个状态类：
.nav-top-transparent { background-image: linear-gradient(to bottom, transparent, rgba(255,255,255,0)); }<br>.nav-top-scrolled { background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.4)); } - 监听滚动时用
requestAnimationFrame节流，检测导航栏是否已贴顶：const rect = navbar.getBoundingClientRect();<br>if (rect.top <= 0) { navbar.classList.add('nav-top-scrolled'); } else { navbar.classList.remove('nav-top-scrolled'); } - 不推荐用
window.scrollY > 50做阈值——页面有 banner 或首屏高度不一时容易误判
慎用 canvas/SVG 遮罩于导航栏
虽然 canvas 的 destination-in 或 SVG <mask> 能做精确渐变遮罩，但对导航栏这类高频复用、需响应式、常带交互的组件并不合适：
- canvas 需手动管理绘制顺序、坐标换算、缩放适配，一旦导航栏高度随断点变化就易错位
- SVG mask 在内联时不易与 Bootstrap 类集成，且 mask 默认基于 alpha 通道，需用灰度色（如
#000完全遮挡），不如 rgba 直观可控 - 移动端 fixed 导航栏配合 canvas 渲染可能触发重绘抖动，尤其 iOS Safari
- 除非你明确需要「仅遮罩导航栏某一块区域（如只让 logo 区渐变）」，否则优先走 CSS 方案
