transparent在linear-gradient中被部分浏览器（如Safari 15–16、旧版Chrome、Android X5内核）解析为纯黑或纯白，导致透明渐变失效；推荐用rgba(255,255,255,1)→rgba(255,255,255,0)或#ffffff00替代，禁用transparent和rgba(0,0,0,0)。
transparent在linear-gradient里被当成黑色处理
浏览器解析linear-gradient时，若色标中用了transparent，部分引擎（尤其是 Safari 15–16、旧版 Chrome、Android X5 内核）会把它映射为纯黑（#000）或纯白（#fff），而不是“无颜色”。结果就是linear-gradient(to bottom, #fff, transparent)实际渲染成linear-gradient(to bottom, #fff, #000)——视觉上就是从白到黑的实色渐变，毫无透明过渡。
- 这不是 bug，是规范未强制
transparent对应具体 rgba 值，各实现自由发挥 - iOS Safari 和 Android 5–8 WebView 最典型：写
transparent大概率出黑块或灰阶过渡 - 即使语法正确，Safari 16.4 之前对
transparent作渐变终点仍会 fallback 到亮度为 0 的值（即黑）
为什么rgba(0,0,0,0)也不总可靠
rgba(0,0,0,0)看似精准，但仍有兼容陷阱：
- 旧版 Edge 和某些微信 X5 内核会忽略带
0alpha 的rgba()，直接丢弃该色标，导致渐变截断甚至整条失效 - 如果和
transparent混用在同一渐变中（如linear-gradient(red, transparent, rgba(0,0,0,0.3))），部分浏览器会把transparent转成黑再插值，中间段意外变深 -
rgba(0,0,0,0)是预乘 Alpha 值，某些 WebGL 渲染路径下可能被误判为“全黑+全透”，而非“无色彩”
真正安全的写法：用带 alpha 的十六进制或明确 rgba
必须显式声明颜色基底 + 透明度，避免任何语义化关键字：
- ✅ 推荐：
linear-gradient(to top, #ffffff, #ffffff00)（8 位 hex，iOS/Android 兼容性最好） - ✅ 推荐：
linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0))（所有现代浏览器稳定） - ❌ 禁用：
transparent、rgba(0,0,0,0)、hsla(0,0%,0%,0)等“零值系”透明写法 - 务必单独加
background-color: #fff兜底——X5 内核一旦渐变解析失败，会直接填黑，有background-color才能保底为白
Firefox 里mask-image用transparent也发黑？那是luminance模式在作怪
如果你在mask-image: linear-gradient()里写transparent，发现遮罩没淡出反而全黑，问题不在透明本身，而在 Firefox 默认用luminance模式读取遮罩图。transparent在此模式下亮度恒为 0，等价于black，所以linear-gradient(black, transparent)实际是linear-gradient(black, black)。
立即学习“前端免费学习笔记（深入）”；
- 解法不是换颜色，而是改模式：
mask-mode: alpha - 同时把色标换成
rgba(0,0,0,1)→rgba(0,0,0,0)，确保 alpha 通道真实变化 - 别信
mask-image: linear-gradient(white, transparent)——white在 luminance 下亮度=1，transparent亮度=0，但浏览器仍可能插值出非预期灰阶
transparent就像扔骰子，而用rgba()或#rrggbbaa才是握着筛子的手。 
