用 background: linear-gradient() 做遮罩层时，为什么看不到底层内容？
因为渐变本身不透明，但“透明”不是靠颜色值决定的，而是靠 alpha 通道或 rgba()/hsla()。直接写 linear-gradient(black, transparent) 看似有透明，实际是黑到完全透明——中间过渡色仍是不透明的灰黑色，会盖住下面内容。
- 错误写法：
background: linear-gradient(to bottom, #000, #0000)——#0000是无效颜色，浏览器忽略整条声明 - 正确思路：必须用带 alpha 的颜色函数，比如
rgba(0, 0, 0, 0.6)到rgba(0, 0, 0, 0) - 更稳妥写法：用
transparent作为终点，但起点必须是带 alpha 的值，否则起点不透明就全挡住了
为什么加了 position: absolute 还是没盖准？
遮罩层定位失效，90% 是因为父容器没设 position: relative。absolute 是相对于最近的「已定位祖先」找位置的，如果一路向上都没 relative/absolute/fixed，就会跑到 body 上去，脱离目标区域。
- 必须给遮罩的直接父容器加
position: relative（或其它定位值） - 遮罩层自身要配
top: 0; left: 0; width: 100%; height: 100%才能铺满父容器 - 如果父容器是 flex 或 grid 容器，也要注意是否设置了
align-items/justify-content，可能把遮罩挤偏
z-index 没生效？先检查层叠上下文
z-index 只在同一个层叠上下文中起作用。如果遮罩层的某个祖先元素触发了新的层叠上下文（比如有 opacity 、<code>transform、filter），那它的 z-index 就只在这个小圈子内比较，再大也压不住外面的元素。
- 常见陷阱：父容器写了
opacity: 0.99来“避免重绘”，结果遮罩层被关进这个上下文里，永远低于兄弟节点 - 替代方案：用
background-color: rgba(0,0,0,0.01)代替opacity触发硬件加速，又不创建新层叠上下文 - 调试技巧：在 DevTools 里选中遮罩层，看右侧面板的
Computed标签页里z-index是否显示为生效状态
移动端 Safari 上渐变遮罩边缘发虚或错位
iOS Safari 对 linear-gradient 的渲染精度低，尤其在高 DPR 屏幕上，to bottom 类方向渐变容易出现 1px 偏移或半透明毛边。
立即学习“前端免费学习笔记（深入）”；
- 绕过办法：改用
to bottom right或加个极小角度，比如270.1deg，避开 Safari 的优化路径 - 更稳方案：用
mask-image: linear-gradient(...)替代background，但注意兼容性（iOS 15.4+ 支持） - 别依赖
background-size: 200% 200%做拉伸修复——这会让渐变重复，反而更糊
linear-gradient，而是你得同时盯住定位流、层叠上下文、设备渲染差异这三根线——少盯一根，遮罩就飘了。 
