多个渐变需用逗号分隔写在同一个background属性中，先写的在上层；rgba透明度要依背景明暗和文字位置调整，避免硬边；background-size和position须每层显式声明，顺序与渐变对应。
background 里多个渐变怎么写才不打架
直接用逗号分隔多个 linear-gradient() 或 radial-gradient()，顺序决定图层上下：先写的在上，后写的在下。浏览器按声明顺序一层层往上叠，不需要额外容器或伪元素。
常见错误是把渐变和图片混着写却没注意顺序——比如 url('bg.jpg'), linear-gradient(...) 会让图片盖住渐变，完全达不到蒙版效果；正确写法是把渐变放前面：linear-gradient(...), url('bg.jpg')。
- 所有渐变必须写在同一个
background或background-image属性里，不能拆到多个声明中（否则后声明会覆盖前声明） - 避免用
background-color和background-image混用——background-color是最底层，无法参与多层叠加的 z-order 控制 - 调试时可临时加
background-color: red看哪一层生效，比猜堆叠逻辑更可靠
rgba 透明度怎么调才不糊也不盖死
rgba() 的 a 值不是越大越好，也不是越小越安全。关键看叠加位置和背景明暗：深色图上 rgba(0,0,0,0.2) 几乎看不见，浅色图上 rgba(0,0,0,0.6) 可能直接吞掉细节。
真正影响可读性的是渐变方向与文字区域的匹配度。比如标题靠右，就别用 to bottom，改用 to right 或 to top 让高透明区留出文字空间。
- 起始色标建议用
rgba(0,0,0,0.6)，结束色标用transparent或rgba(0,0,0,0)，避免硬边 - 慎用
hsla()调透明——语法易错、调试困难，rgba()更直观可控 - IE10 不支持按层设置
background-size，若需兼容，得降级为单图 +::before叠渐变
background-size 和 background-position 必须每层单独设
默认情况下 background-size: cover 会同时作用于所有层，但渐变没有“原始尺寸”，会被强行拉伸填满，导致图片被二次缩放而模糊。
正确做法是显式写出每层的尺寸和定位，用逗号对应顺序：background-size: 100% 100%, cover 表示第一层（渐变）等比铺满，第二层（图片）按 cover 缩放；background-position: center, center 确保两者对齐。
- 哪怕只有一张图+一个渐变，也必须写两遍
background-position，否则渐变从左上角开始，图片居中，结果黑条只盖左上角 -
background-repeat: no-repeat不能代替background-position，它只控制是否平铺，不解决对齐问题 - 移动端 Safari 旧版本对
background-blend-mode敏感，但这里不用它，所以无需额外处理
多层渐变性能和可维护性怎么平衡
三层以上渐变叠加视觉上可能更丰富，但实际开发中容易失控：颜色值难统一、调试成本高、旧设备 GPU 渲染压力上升。品牌规范落地时，优先保证主视觉层（如品牌主色渐变）+ 一层功能层（如文字可读性蒙版）。
如果设计稿要求“光斑+斜纹+主渐变”三层，建议把其中一层转为 SVG 或 CSS 图案（如 repeating-linear-gradient 实现细线），减少真实渐变层数。
- 渐变本身零 JS 开销，但每多一层
url()图片，GPU 就得多画一次——确保图片已压缩，background-size: cover别用在 >2MB 的高清图上 - UnoCSS 等原子类方案支持
gradient-from-position这类微调变量，比手写rgba(0,0,0,0.4) 30%更易对齐品牌色标位置 - 最容易被忽略的是——渐变层之间没有 z-index，只能靠书写顺序控制，改顺序前务必确认 UI 元素的视觉依赖关系
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
