linear-gradient 会完全覆盖 background-color，实现混合需用多层背景加 background-blend-mode 或将底色设为渐变起点/终点；注意方向单位、色标控制及兼容性。
linear-gradient 覆盖 background-color 的优先级问题
直接写 background-color 和 background-image: linear-gradient(...) 在同一个元素上，后者会完全盖住前者——不是叠加，是覆盖。浏览器只认 background 这个复合属性的最终展开结果，background-image 一旦存在，就会渲染在最上层，底下的纯色根本看不到。
真正能实现“渐变+底色”混合效果的方式只有一种：把颜色作为渐变的起点或终点，或者用多层背景（background 支持逗号分隔的多层值）。
- 错误写法：
button { background-color: #f0f0f0; background-image: linear-gradient(to right, #ff6b6b, #4ecdc4); } - 正确写法（单层渐变含底色倾向）：
button { background: linear-gradient(to right, #f0f0f0, #ff6b6b, #4ecdc4); } - 正确写法（双层背景：底层色 + 上层透明渐变）：
button { background: #f0f0f0, linear-gradient(to right, rgba(255,107,107,0.8), rgba(78,205,196,0.8)); background-blend-mode: overlay; }
background-blend-mode 是控制混合的关键开关
只有当 background 中声明了**两层及以上背景**（颜色 + 渐变，或两个渐变），且设置了 background-blend-mode，才能让它们真正“混合”而非堆叠。默认值是 normal，此时第二层只是简单覆盖第一层。
常用值中：overlay 让渐变保留纹理感又不压死底色；multiply 更适合深色底+浅色渐变；screen 反之。注意：IE 完全不支持该属性，移动端 Safari 12.2+ 才稳定支持。
立即学习“前端免费学习笔记（深入）”；
- 必须写全背景层，不能只写
background-image：div { background: #333, linear-gradient(45deg, #ff9a9e, #fad0c4); background-blend-mode: overlay; } - 如果只想要轻微着色，用
rgba()控制渐变透明度比调opacity更安全（后者会影响整个元素内容）
渐变方向与色标位置影响视觉重心
linear-gradient 的第一个参数决定轴向，但很多人忽略：角度单位用 deg 时，0deg 是向上，90deg 才是向右——和 CSS 坐标系一致，不是数学极坐标。写 to right 更直观，但动态计算角度时容易出错。
色标（color stop）位置用百分比或长度单位控制过渡节奏。不写位置默认均分，但想强调某段色彩停留时间，就得显式标注：
background: linear-gradient(135deg, #1a2a6c 0%, #2c3e50 50%, #4a6491 100%);
- 想让深蓝只占顶部 20%，中间留白过渡：
background: linear-gradient(180deg, #1a2a6c 0%, #1a2a6c 20%, transparent 20%, transparent 80%, #4a6491 80%, #4a6491 100%);
兼容性兜底与性能提示
老版本 Android Browser、iOS Safari linear-gradient（IE10+ 需加 -ms- 前缀）。现代项目可用 @supports 做渐进增强，但别依赖它做核心样式降级。
更实际的兜底是：先写纯色，再覆盖渐变（利用 CSS 层叠）：
element { background: #3498db; background: linear-gradient(135deg, #3498db, #8e44ad); }- 避免在
body或长列表项上高频使用多层background-blend-mode，某些低端 Android 设备会出现渲染卡顿或闪烁 - 渐变本身不触发重排，但和
background-position动画一起用时，GPU 加速不一定生效，建议加will-change: background-position提前告知
