CSS中background-image结合linear-gradient()可创建无图片的平滑渐变背景，语法为background-image: linear-gradient(方向, 颜色停止点)；支持关键词或角度定义方向，如to right或45deg，并可指定多色及位置，如red 0%、blue 100%；常见用法包括上下、左右、对角线渐变，例如linear-gradient(to bottom right, #ff7e5f, #feb47b)，也可用角度如135deg控制方向，支持透明色实现遮罩效果，且能与background-size等属性配合优化布局，现代浏览器兼容性良好，提升页面视觉层次的同时保持代码简洁高效。
包括上下、左右、对角线渐变，例如linear-gradient(to bottom right, #ff7e5f, #feb47b)，也可用角度如135deg控制方向，支持透明色实现遮罩效果，且能与background-size等属性配合优化布局，现代浏览器兼容性良好，提升页面视觉层次的同时保持代码简洁高效。在CSS中使用 background-image 和 linear-gradient() 可以轻松创建平滑的背景颜色过渡效果。它不需要图片资源，性能好，适配性强，广泛用于现代网页设计。
基本语法
linear-gradient() 函数用于生成一个线性渐变的图像，可作为 background-image 的值：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
- direction：渐变方向，可以是角度（如 45deg）或关键词（如 to right）
- color-stop：颜色值，可带位置（如 red 0%, blue 100%）
常见用法示例
以下是一些实用的写法：
从上到下的渐变（默认方向）background-image: linear-gradient(blue, white);
从左到右的渐变background-image: linear-gradient(to right, red, yellow);
对角线渐变background-image: linear-gradient(to bottom right, #ff7e5f, #feb47b);
使用角度控制方向background-image: linear-gradient(135deg, green, yellow, red);
多色与指定位置background-image: linear-gradient(to right, red 0%, orange 30%, yellow 60%, green 100%);
实用技巧与注意事项
- 为了更好的浏览器兼容性，确保声明完整的 background 属性或添加必要的前缀（现代浏览器基本无需）
- 可以结合 background-size、background-position 进行精细控制
- 支持透明色（transparent），常用于遮罩效果：
例如：background-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent); - 可与其他 background-image 叠加使用（配合伪元素更灵活）
基本上就这些。掌握 linear-gradient 能让你的页面视觉更有层次，且代码简洁高效。
