rgba()遮罩在媒体查询中失效因opacity影响整个元素，应使用独立伪元素或div；移动端alpha值宜设为0.6–0.7；linear-gradient需显式定义色标位置并注意方向切换；层叠顺序须渐变在前、rgba在后；Safari闪烁问题需避免transform和will-change，且伪元素须设content和pointer-events。
rgba() 遮罩在媒体查询里失效？别直接套用固定透明度
很多同学写 rgba(0, 0, 0, 0.5) 加在背景上，再配 @media (max-width: 768px) 改 opacity，结果发现遮罩变灰又变糊——opacity 会把整个元素（含文字、子节点）一起透，不是只调遮罩层。
- 遮罩必须用独立的伪元素或空
<div>，确保它只覆盖背景区域 - 优先用
background: rgba(0, 0, 0, 0.5)而非opacity，避免影响内容可读性 - 移动端小屏下，
rgba()的 alpha 值建议提高到0.6–0.7，防止文字对比度不足被系统字体渲染弱化
linear-gradient() 做响应式遮罩时，方向和色标位置很关键
用渐变模拟“顶部深、向下淡出”的遮罩效果，常被写成 background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent)，但实际在窄屏上容易出现遮罩过短、文字仍刺眼的问题。
- 色标位置要显式写死，比如
linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 60%)，否则默认 50% 过渡，在不同高度容器里表现不一致 - 横屏 iPad 或折叠屏展开态下，
to bottom可能变成“从左到右”才合理，可用orientation媒体查询切方向：@media (orientation: landscape) - 渐变叠加在图片上时，记得加
background-blend-mode: multiply，否则浅色图+黑渐变会发灰
同时用 rgba 和 gradient 时，层叠顺序决定最终效果
想让遮罩既有基础透明度又有方向过渡感，有人会写 background: rgba(0,0,0,0.3), linear-gradient(...)，但 CSS 解析时会把 rgba 当作第一层纯色背景，盖住后面的渐变——完全白忙活。
- 必须把渐变写在前面：
background: linear-gradient(...), rgba(0,0,0,0.3)，这样渐变在上、纯色在下，才能混合出层次 - 更稳妥的做法是只用渐变，把两端色标都设为
rgba，例如：linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.2)) - 如果父容器有
background-image，遮罩层必须是子元素或伪元素，且不能依赖background-attachment: fixed，否则滚动时错位
伪元素遮罩在 Safari 上闪动？检查 transform 和 will-change
用 ::before 实现全屏遮罩，Safari 15.4–16.3 在页面滚动或视口缩放时偶现闪烁，尤其搭配 transform: translateZ(0) 强制硬件加速后更明显。
立即学习“前端免费学习笔记（深入）”；
- 去掉
transform，改用backface-visibility: hidden+contain: layout paint更稳定 - 避免对伪元素设置
will-change: opacity，Safari 对伪元素的will-change支持不完整 - 如果必须动态控制显示/隐藏，用
visibility: hidden+opacity: 0组合，比单纯display: none更利于复用 GPU 图层
pointer-events: none，导致点击穿透失败；或者忘了给伪元素加 content: ""，让它根本不出现在渲染树里。这些细节不报错，但一上线就卡壳。 
