背景图像属性
最后更新：2026-09-13
background-image 背景图像属性
background-image 属性用于在元素上设置一个或多个背景图像，支持 url() 图片路径和渐变函数。多张背景图用逗号分隔，先写的图层显示在上层。该属性常与 background-size、background-position 等配合使用。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | discrete |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
background-image: none | <image> | linear-gradient() | radial-gradient();⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无背景图 |
<image> | 类型 | url() 图片或渐变 |
linear-gradient() | radial-gradient() | 函数 | 线性或径向渐变 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-image | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 可以同时设置背景图和背景色，背景图会显示在背景色之上，颜色在图片透明部分可见。
提示： 渐变函数（linear-gradient、radial-gradient）生成的图像也属于 background-image。
❓ 常见问题
Q如何设置多层背景图？
A用逗号分隔多张图片，如 background-image: url(a.png), url(b.png), linear-gradient(...);，先写的在最上层。多层背景可配合 background-size、background-position 分别控制每一层，值同样用逗号对应。
Q背景图加载失败会怎样？
A如果同时设置了 background-color，图片加载失败（路径错误、被拦截或格式不支持）时会显示背景色作为兜底；未设置背景色则显示透明。注意 background-image 本身没有 alt 文本，纯装饰背景图不应承载关键信息，重要内容请使用 <img> 并提供文字说明。
Qbackground-image 和 <img> 标签有什么区别？
Abackground-image 属于 CSS 表现层：不占文档流、不被搜索引擎索引、无 alt 语义、可任意裁切定位，适合装饰性背景；<img> 属于 HTML 内容层：有 alt 文本、可被索引和选中，用于承载有意义的内容。图片加载失败时 <img> 有 alt 兜底，背景图则直接消失。
Q背景渐变怎么写？
A渐变属于背景图像。线性渐变 linear-gradient(135deg, #667eea, #764ba2) 沿 135 度过渡；径向渐变 radial-gradient(circle, #fff, #333) 从中心向外扩散。可叠加多层实现更复杂效果，并保留纯色 background-color 兜底。
🏷️ 相关属性
💡 相关案例
📚 相关教程
