css中可用background-image多层叠加实现渐变+图片，格式为linear-gradient(), url()，渐变在前、图片在后，渐变需设透明度；慎用background-blend-mode；避免background-attachment: fixed导致错位；background-image本身不可动画，需切换class或用background-position动画。
background-image 里用多个图层叠加实现渐变+图片
纯 CSS 实现「背景图片 + 线性渐变」不是靠“渐变背景图片”，而是把渐变和图片作为同一 background-image 的多层值，用逗号分隔。浏览器按从前往后顺序叠放：前面的在上层，后面的在下层。
- 写法必须是
background-image: linear-gradient(...), url(...)，不能反过来，否则图片会被渐变完全盖住 - 渐变层需设透明度（如
rgba(0,0,0,0.4)）或使用透明色 stop，否则会遮死图片 - 如果只要局部压暗/提亮图片，推荐用
linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%)这类方向性渐变
body { background-image: linear-gradient(to top, rgba(0,0,0,0.5), transparent), url("bg.jpg"); background-size: cover; background-position: center; }用 background-blend-mode 混合渐变与图片（慎用）
background-blend-mode 能让单层 background-image 中的多个图层发生颜色混合，但它要求所有图层都是图像源（包括渐变 —— CSS 中渐变属于
- 仅支持 chrome 47+、firefox 30+、safari 8+；IE 完全不支持
- 常用模式如
multiply（加深）、overlay（增强对比）、screen（提亮），但结果依赖图片明暗，不易预测 - 必须配合
background-color或纯色渐变才有效果，纯透明渐变 blend 不出变化
div { background-image: linear-gradient(45deg, #ff6b6b, #4ecdc4), url("texture.png"); background-blend-mode: overlay; background-color: #fff; /* 提供 blend 基底色 */ }避免 background-attachment: fixed 导致渐变错位
当同时使用 background-attachment: fixed 和多层 background-image（尤其是渐变+图片）时，各层固定行为不一致：图片按视口固定，渐变却可能按元素固定，造成视觉撕裂或错位。
- 绝大多数情况下应去掉
fixed，改用scroll（默认值） - 若真需要视差效果，优先用
position: sticky或 js 控制 transform，而非依赖 background-attachment - 测试时务必在滚动中观察渐变边缘是否随图片同步偏移
渐变过渡动画无法直接作用于 background-image
CSS 动画不能直接对 background-image 的渐变角度或颜色做过渡 —— 浏览器不支持该属性为可动画值。所谓“渐变过渡”，实际是切换两个不同 background-image 值，靠 transition 触发重绘。
立即学习“前端免费学习笔记（深入）”；
- 只能对
background-color、opacity、transform等真正可动画属性加transition - 想让渐变“动起来”，得用
@keyframes改变background-position（对重复渐变有效）或切换 class 切换整套background-image - 动态换图+渐变时，注意图片加载完成前的闪白，建议加
background-color作 fallback
真正难调的是渐变透明度与图片细节的平衡点 —— 太浅压不住噪点，太深吞掉关键纹理。这没有通用值，得贴着具体图反复试 rgba() 第四个参数。