在 linear-gradient 中直接使用 rgba 颜色是安全且推荐的，主流浏览器均支持；IE11 除外，需用 rgba(r,g,b,xx%) 百分比格式而非小数。
linear-gradient 里直接写 rgba 颜色是安全的
css 渐变中想控制某一段颜色的透明度，最直接的方式就是在 linear-gradient() 的颜色参数里用 rgba()。浏览器对这种写法支持良好（chrome 26+、firefox 16+、safari 6.1+、edge 12+），不需要额外前缀或降级方案。
常见错误是误以为必须用 transparent 或叠加伪元素来模拟半透效果——其实没必要。只要颜色值本身带 alpha 通道，渐变过渡就会自然包含透明度变化。
-
linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0))：从不透明红到完全透明红，不是变黑或变白 - 避免写成
linear-gradient(to right, red, transparent)，这会从红色过渡到「透明黑色」（即背景色显露），语义和视觉都不同 - RGBA 中 alpha 值为
0时等价于transparent，但显式写rgba(0,0,0,0)可能被误读为“黑且透明”，实际渲染结果一样，只是可读性差
background-image 和 background-color 不能同时生效？
当用 linear-gradient 作 background-image 时，它会覆盖掉同层的 background-color。如果想实现「渐变底 + 整体透明度」，不能靠给父容器设 opacity（那会影响所有子内容），而应把透明度逻辑放进渐变本身或叠加一层纯色背景。
- 错误做法：
div { background-color: rgba(0,0,0,0.3); background-image: linear-gradient(to bottom, #fff, #000); }→
background-color被忽略 - 正确做法：把主色也写进渐变，例如
div { background-image: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(0,0,0,0.9)); } - 或者分层：
div { background-color: #fff; background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4)); }，此时
background-color是底层，渐变是上层蒙版
IE11 对 rgba 在 gradient 中的支持有边界情况
IE11 支持 linear-gradient，但对 RGBA 颜色的解析存在兼容性陷阱：它无法正确处理小数型 alpha（如 rgba(0,0,0,0.3)），必须写成整数百分比形式（rgba(0,0,0,30%)）才能生效。
立即学习“前端免费学习笔记（深入）”；
- ✅
rgba(0,0,0,30%)在 IE11 渲染正常 - ❌
rgba(0,0,0,0.3)在 IE11 中会被当作无效值，退回到默认色（通常是黑） - 如果项目还需兼容 IE11，建议统一用百分比写法，或用 Autoprefixer + postcss-opacity 插件自动转换
用多个渐变层叠加实现复杂透明效果
单个 linear-gradient 只能做线性过渡，但通过逗号分隔多个渐变值，可以叠加方向/类型不同的透明层，比如「垂直渐变底 + 水平噪点蒙版」或「主色渐变 + 边缘羽化」。
- 语法：
div { background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(0,0,0,0.2)), linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 75%, transparent 75%, transparent); } - 注意：多层渐变中，前面的图层在上，后面的在下；每层都可独立用
rgba控制透明度 - 性能提示：过多图层或高频率重绘区域（如滚动容器）可能触发合成层开销，简单场景优先用单层渐变解决
实际应用中最容易被忽略的是 alpha 值的单位一致性——尤其在团队协作或跨项目复用样式时，0.3 和 30% 混用会导致 IE11 下部分渐变失效，且不易定位。写的时候顺手统一格式，比后期调试省事得多。