不能用opacity控制渐变透明度，因为opacity作用于整个元素及其子内容，导致文字、边框等一同变透明；而渐变透明度需仅影响背景，必须将alpha值嵌入rgba()或hsla()颜色函数中作为色标属性。
直接用 rgba() 或 hsla() 颜色值作为渐变色标，就能精确控制每个位置的透明度；opacity 不行——它会把整个元素（包括文字、子节点）一起变透明。
为什么不能用 opacity 控制渐变透明度
opacity 是作用于整个元素的层叠属性，一旦设为 0.5，里面的文字、边框、伪元素全跟着变半透。而渐变背景里的透明度需求，通常只要“背景自己透”，内容保持清晰。所以必须把透明度写进颜色本身，而不是挂到元素上。
-
opacity: 0.3→ 整个容器+子元素都变淡，不可逆 -
background: linear-gradient(to right, rgba(0,0,0,0.8), rgba(0,0,0,0))→ 只有背景从深灰过渡到完全透明，文字照常显示 - 旧版 IE 的
filter: alpha(opacity=30)同样全局生效，且已淘汰，不建议兼容
rgba() 在 linear-gradient 中怎么写才有效
关键点：每个色标都必须是独立有效的 rgba() 值，alpha 参数必须是 0–1 的小数（不是百分比），且不能省略括号和逗号。浏览器对格式错误非常严格，错一个字符就整条渐变声明失效，回退为纯色或无背景。
- ✅ 正确：
linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(255,255,255,0)) - ❌ 错误：
linear-gradient(to bottom, rgba(0,0,0,70%), rgba(255,255,255,0))（alpha 不接受百分比） - ❌ 错误：
linear-gradient(to bottom, rgb(0,0,0,0.7), rgba(255,255,255,0))（rgb()没第四个参数，整段被忽略） - ⚠️ 注意：Chrome/Firefox/Safari 都支持，但 Safari 15.4 之前对多色标 + 高频 alpha 变化偶有渲染抖动，可加
will-change: background缓解
radial-gradient 中透明度控制的常见陷阱
径向渐变容易忽略色标位置隐含的透明度叠加效果。比如 radial-gradient(circle, rgba(0,0,0,0.6), rgba(0,0,0,0)) 看似简单，但默认从中心发散，如果容器宽高不等，椭圆拉伸会导致透明过渡区域偏移，视觉上“蒙版不居中”。
立即学习“前端免费学习笔记（深入）”；
- 用
radial-gradient(circle at center, ...)显式固定中心点，避免响应式下偏移 - 两个色标之间没有中间值时，过渡可能太硬；加一个中间色标如
rgba(0,0,0,0.3)能柔化边缘 - 不要混用
transparent和rgba()：虽然transparent等价于rgba(0,0,0,0)，但在某些 Safari 版本中与rgba()混用会导致渲染异常 - 调试技巧：临时把 alpha 值全改成
1，确认色标顺序和方向正确后再调透明度
多层背景叠加时透明度如何协同工作
当用 background-image 叠加图片 + 渐变时，透明度只影响当前图层，但图层绘制顺序决定最终混合效果。渐变层必须放在图片层「上面」才能遮罩，否则会被盖住。
- ✅ 正确顺序：
background-image: linear-gradient(to top, rgba(0,0,0,0.6), transparent), url(bg.jpg); - ❌ 反了就失效：
background-image: url(bg.jpg), linear-gradient(...);→ 图片在上，渐变被挡住 - 如果渐变里用了
rgba(255,255,255,0.2)这类浅色低透明度，叠加深色图片时可能看不出效果，建议先用纯黑/白测试过渡逻辑 - 性能提示：含透明度的渐变不会触发硬件加速，但若配合
backdrop-filter使用，需注意 iOS Safari 对混合模式的支持有限
真正难的不是写对语法，而是判断哪一层该透、透多少、是否和其他图层冲突——多数问题出在没理清「谁盖谁」和「alpha 是颜色属性，不是元素属性」这个前提。
