透明度过渡不能仅靠opacity硬切，必须搭配transition控制节奏，并区分整体变淡与仅背景变淡：整体用opacity+transition，背景透明用rgba/hsla；滚动渐变需JS监听并节流切换class，毛玻璃效果依赖backdrop-filter。
直接说结论：透明度过渡效果不能只靠 opacity 硬切，必须搭配 transition 控制变化节奏，且要区分「整个元素变淡」和「仅背景变淡」两种需求，否则文字会糊、层级会乱、滚动时还会闪。
用 opacity + transition 实现整体渐变过渡
这是最常用也最容易出错的方式。关键不是设个 opacity: 0.7 就完事，而是得让浏览器知道“怎么变”和“变多快”。
-
opacity本身不触发重绘，但值变化时会触发布局重排（尤其在旧版 Safari 中），所以必须加transition - 写法必须是
transition: opacity 0.3s ease;，不能简写成transition: all 0.3s;——后者会把所有属性都过渡，容易卡顿或意外动画 - 如果元素含子元素（比如带图标的按钮），
opacity会让图标和文字一起变淡，这不是“遮罩”，是“整体衰减” - IE 8–9 需补
filter: alpha(opacity=70);，但现代项目基本可忽略
示例：
.fade-btn {
opacity: 1;
transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-btn:hover {
opacity: 0.6;
}
用 rgba() 或 hsla() 只让背景透明，内容保持清晰
导航栏、弹窗蒙层、卡片遮罩等场景，真正需要的是“背景透、字不糊”。这时候死磕 opacity 是反模式。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 改用
background-color: rgba(255, 255, 255, 0.9)，第四个参数控制背景自身透明度，文字/图标完全不受影响 - 想做顶部导航栏的滚动渐变？别用
opacity，用background-image: linear-gradient(to bottom, transparent, rgba(255,255,255,0.15))+background-color: rgba(255,255,255,0)回退 -
hsla(0, 0%, 100%, 0.8)更适合设计系统，色调统一时调 alpha 更安全 - 注意：纯
transparent不是万能 fallback，它在部分安卓 WebView 中可能渲染为黑底，建议配background-color: rgba(255,255,255,0)
滚动中动态调节透明度必须用 JS 监听 scroll 并切换 class
CSS 无法读取滚动位置，:hover 和媒体查询都无解，硬写 @keyframes 也做不到响应式渐变强度。
- 监听
window.addEventListener('scroll', ...)，用window.scrollY计算比例 - 不要实时改
style.opacity，频繁 DOM 写入会掉帧；应预设几个 class（如.nav-0,.nav-30,.nav-100），JS 只负责切换 - 避免在
scroll回调里直接操作background-image渐变色 stops——CSS 解析开销大，降级为改background-color的 alpha 值更稳 - 记得加
throttle或requestAnimationFrame节流，否则快速滚动时 iPhone Safari 容易卡住
backdrop-filter: blur() 加渐变是毛玻璃感的唯一可行路径
所谓“iOS 风导航栏”，本质是两层叠加：底层内容可见 + 上层半透模糊遮罩。单靠 opacity 或 rgba 都模拟不出来。
- 必须满足三个条件：元素
position: fixed或sticky、父容器有真实内容可穿透、启用-webkit-backdrop-filter: blur(10px) - 渐变只能作用于遮罩层本身：
background-image: linear-gradient(to bottom, transparent, rgba(255,255,255,0.1)) - iOS Safari 15+、Chrome 97+ 支持良好；Android Chrome 大部分支持，但低端机 blur 会掉帧；Firefox 全面不支持，需降级为纯
rgba背景 - 别忘了加
border-bottom: 1px solid rgba(0,0,0,0.03)——完全透明时用户会失去视觉锚点，这条细线就是最后的“存在感”
最易被忽略的一点：透明度过渡不是视觉问题，是合成层（compositing layer）管理问题。没开硬件加速、没设 will-change: opacity、或者父元素有 overflow: hidden，都可能导致过渡生硬甚至失效。动手前先看 DevTools 的 Layers 面板。
