用 linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)) 实现蒙层自下而上透明度渐变，配合 fixed 全屏定位、safe-area 适配及 background-attachment: local，兼顾视觉引导、滚动稳定与多端兼容。
为移动端底部弹窗的蒙层（overlay）添加透明度渐变过渡，核心目标是：**让蒙层从靠近弹窗处较深、较不透明，向上（向屏幕顶部）逐渐变浅、变透**，从而自然引导视觉焦点到弹窗内容，同时避免生硬的色块切割。这不是简单调 opacity，而是要实现空间上的透明度分布变化。
用 linear-gradient 实现蒙层透明度渐变
这是最通用、兼容性最好、且真正符合“渐变”本意的做法。关键不是改元素整体透明度，而是用带 alpha 的渐变色覆盖在背景之上：
- 蒙层元素本身需有明确背景（如半黑），但不能直接设
background-color: rgba(0,0,0,0.6)—— 这是均匀透明，不是渐变 - 正确写法是：
background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); -
方向必须是
to top：起点在底部（深色），终点在顶部（完全透明），这样弹窗区域下方蒙层最浓，越往上越“消失” - 务必加上：
background-size: 100% 100%; background-repeat: no-repeat;
否则默认平铺或缩放会破坏渐变效果，尤其在不同屏高下
确保蒙层下方有可对比的背景
渐变“透明”是相对的。如果蒙层父容器没有背景图或背景色，rgba(0,0,0,0) 就真成全透明，看不到任何过渡。所以：
- 蒙层通常应覆盖在有内容的区域上（如带图片或纯色背景的 body 或 wrapper）
- 若父容器为空白，需显式设置其
background-color或background-image，否则渐变蒙层会失效或显示异常 - 不要依赖
transparent作为渐变终点色——部分旧版 Safari 解析不稳定；统一用rgba(0,0,0,0)更稳妥
适配移动端滚动与安全区
底部弹窗常伴随页面滚动，需防止蒙层错位或遮挡状态栏/导航栏：
- 给蒙层加
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，确保覆盖全屏 - 使用
env(safe-area-inset-top)和env(safe-area-inset-bottom)修正高度，避免被刘海或小圆角裁切：height: calc(100vh - env(safe-area-inset-bottom)); - 若弹窗本身可滚动，蒙层建议加
background-attachment: local;，防止滚动时渐变位置相对内容滑动
性能与 fallback 建议
该方案纯 CSS，无 JS 开销，性能极佳。但仍需注意：
- 避免在蒙层上叠加过多其他
filter（如blur），尤其在低端 Android 设备上可能卡顿 - 如需更强视觉层次（比如模糊+渐变），可用
backdrop-filter: blur(8px)配合上述渐变蒙层，但需检测支持：@supports (backdrop-filter: blur(1px)) { ... } - 极端老旧环境（如 iOS 12 以下）可降级为均匀半透明蒙层：
background-color: rgba(0,0,0,0.5);，不影响功能
