background-image用于设置元素背景图，通过url()引入图片路径，可配合background-repeat、background-position、background-size等属性控制显示效果，支持多图层叠加与简写语法，建议使用现代格式并设置备用色以提升体验。
在CSS中，background-image 属性用于为元素设置一个或多个背景图像。它比纯色背景更灵活，能增强页面的视觉表现力。下面介绍它的基本用法和常见技巧。
基本语法
使用 background-image 时，最基础的写法是配合 url() 函数引入图片路径：
.element {
background-image: url('path/to/image.jpg');
}
其中路径可以是相对路径、绝对路径或网络地址。例如：
-
相对路径：
url('../images/bg.jpg') -
绝对路径：
url('/assets/bg.png') -
网络地址：
url('https://example.com/bg.webp')
常用搭配属性
单独使用 background-image 效果有限，通常需要和其他背景属性配合使用，以控制图片的显示方式。
立即学习“前端免费学习笔记（深入）”；
-
background-repeat：控制图像是否重复以及如何重复。
常用值：repeat（默认）、no-repeat、repeat-x、repeat-y -
background-position：设置背景图的位置。
例如：center、top left、50% 50%、10px 20px -
background-size：定义背景图的尺寸。
常用值：cover（充满容器并保持比例）、contain（完整显示图片）、100% 100%（拉伸填满） -
background-attachment：控制背景是否随内容滚动。
可选值：scroll（随滚动）、fixed（固定，实现视差效果）
这些属性可以合并写在 background 简写属性中：
.element {
background: url('bg.jpg') no-repeat center/cover fixed;
}
多背景图支持
CSS允许在一个元素上叠加多个背景图，图像之间用逗号分隔，**前面的图层在上方**。
.multi-bg {
background-image:
url('overlay.png'), /* 上层 */
url('main-bg.jpg'); /* 下层 */
background-position: top right, center;
background-repeat: no-repeat, no-repeat;
background-size: auto, cover;
}
这种技术常用于在主背景上叠加装饰性图标或渐变遮罩。
注意事项与最佳实践
使用背景图时要注意以下几点，避免常见问题：
- 确保图片路径正确，否则背景不会显示。
- 优先使用现代格式如 WebP 或 AVIF 提升加载性能。
- 为关键背景图设置备用颜色，防止图片加载失败影响布局：
background-color: #f0f0f0; - 大图背景建议配合
background-size: cover和background-position: center保证适配不同屏幕。 - 移动端注意性能，避免使用过大的背景图导致卡顿。
基本上就这些。合理使用 background-image 能显著提升网页视觉体验，关键是掌握好尺寸、定位和兼容性处理。
