正确实现背景透明渐变需在linear-gradient中用rgba()或hsla()指定色标透明度，而非设置元素opacity；多层背景时渐变必须写在图片前，推荐用css变量动态控制alpha值以适配响应式场景。
linear-gradient里用rgba()写色标，不是加opacity
直接给元素设 opacity 会让文字和边框一起变透明，这不是“背景透明渐变”，而是整个元素变淡。真正要控制的只是背景层的透出程度，必须用 rgba() 或 hsla() 写在 linear-gradient() 的色标里。
-
background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0))是正确写法；opacity: 0.5+ 纯黑背景是错的路径 - 不要混用
transparent和rgba()，比如transparent, rgba(0,0,0,0.5)—— 部分旧版 Safari 和 Android WebView 对transparent在渐变中的解析不一致 - 如果目标是让下层图片“从看不见到看得清”，起始色标建议用
rgba(255,255,255,0)（纯白全透），而不是rgba(0,0,0,0)（纯黑全透），人眼对白色过渡更敏感，效果更直观
固定RGB、只调alpha，避免明暗干扰判断
很多人写 linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.8))，发现“透明度没变”——其实 alpha 确实在变，但 RGB 同样是纯黑，人眼主要感知灰阶加深，忽略透明度变化。真正想突出“由透到实”，就得锁定颜色不变，只动第四个参数。
- ✅ 推荐：
linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)) - ❌ 避免：
linear-gradient(to right, rgba(0,0,0,0), rgba(255,255,255,1))—— 这是黑白切换，不是透明度渐变 - 移动端 Safari 对 alpha 差值敏感，
0.01 → 0.02几乎看不出变化，跨度至少设为0.1起步（如0.2 → 0.9）
叠加图片时用多重背景，顺序不能错
要让渐变盖在图片上（比如图上加标题），必须用多层 background-image，且渐变层必须写在图片前面——CSS 背景绘制是从上到下叠的。
- ✅ 正确顺序：
background-image: linear-gradient(...), url('bg.jpg'); - ❌ 错误写法：
background: url('bg.jpg'), linear-gradient(...);—— 这会把图片盖在渐变上面，完全看不到渐变 - 记得配
background-size: cover和background-position: center，否则图片可能拉伸或偏移，破坏渐变覆盖效果
响应式场景下别硬编码alpha，改用CSS变量
小屏下深色模式+滚动态一叠加，写死的 rgba(0,0,0,0.7) 很容易糊成一块。把透明度抽成变量，媒体查询里动态切，才是可维护的写法。
- 定义：
nav { --alpha-start: 0.9; --alpha-end: 0.1; background: linear-gradient(to bottom, rgba(255,255,255,var(--alpha-start)), rgba(255,255,255,var(--alpha-end))); } - 适配移动端：
@media (max-width: 768px) { nav { --alpha-start: 0.85; --alpha-end: 0.05; } } - 渐变方向固定用
to bottom或to right，别用角度（如180deg），横竖屏切换时方向重算会导致跳变
alpha 值不是越小越好，0.05 以下在多数屏幕上已接近不可见，再降只会增加渲染负担，没实际意义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
