CSS中background-image可结合渐变与图像实现多层背景效果。1. 纯渐变作背景：用linear-gradient或radial-gradient设置颜色过渡；2. 渐变叠加图片：将渐变层置于图片前，配合background-blend-mode控制混合模式；3. 多层背景：通过逗号分隔多个渐变和图片层，创建复杂视觉层次；4. 实用技巧：利用background-size控制渐变区域，transparent实现柔化过渡，注意层级顺序与调试方法。
在CSS中，background-image 可以结合渐变色（如线性渐变、径向渐变）和其他图像一起使用，实现丰富的背景效果。你可以用渐变作为背景的一部分，甚至叠加在图片之上，或者创建多层背景。
1. 使用纯渐变作为 background-image
最简单的用法是直接将渐变当作背景图像：
background-image: linear-gradient(45deg, #ff7e5f, #feb47b);
background-image: radial-gradient(circle, #a8edea, #fed6e3);
2. 渐变与图片叠加（叠加遮罩效果）
如果你想在一张背景图上叠加渐变（比如让文字更清晰），可以这样写：
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('your-image.jpg');background-blend-mode: overlay;
- 第一个值是渐变层（半透明黑色），第二个是实际图片
- 使用 background-blend-mode 控制两层如何混合，常见值有 overlay、multiply、screen
- 注意：渐变写在前面，图片在后面，顺序影响渲染层级
3. 多层背景：渐变 + 图片 + 渐变
CSS 支持多层背景，用逗号分隔：
background-image:
linear-gradient(to right, transparent, black),
url('bg.jpg'),
radial-gradient(ellipse at bottom, #000, transparent);background-size: cover, cover, cover;background-position: center, center, center;background-repeat: no-repeat;
4. 常见实用技巧
- 如果只想让渐变覆盖部分区域，可以用 background-size 控制其大小，例如：
background-size: 100% 20%, cover;—— 渐变只占顶部20% - 使用 transparent 能让渐变更柔和地融合背景内容
- 调试时建议给 body 或 div 设置固定高度，方便看到渐变效果
基本上就这些。关键点是把渐变看作“图像”来处理，和其他 background-image 一样参与叠加和布局。不复杂但容易忽略细节，比如顺序和尺寸控制。
