使用CSS设置背景图片需掌握格式与重复属性。1. background-image配合url()设置图像，支持JPEG（照片）、PNG（透明图）、WebP（高效压缩）、SVG（矢量图标）。2. background-repeat控制平铺：repeat（默认双方向）、no-repeat（单图）、repeat-x/y（单向）。3. 简写background可合并属性，如background: url('bg.jpg') no-repeat center。4. 建议用WebP提升性能，搭配background-size: cover优化显示，小图精确定位，确保视觉效果与加载速度平衡。
在网页设计中，使用CSS设置背景图片可以让页面更具视觉吸引力。正确配置背景图片的格式和重复属性，能确保图片显示效果符合预期。
background-image 基本语法
通过 background-image 属性为元素设置背景图，通常配合 url() 函数使用：
div {
background-image: url('image.jpg');
}
支持的图片格式包括：JPEG、PNG、GIF、WebP 和 SVG。推荐根据用途选择：
立即学习“前端免费学习笔记（深入）”；
- JPEG：适合照片类大图，体积小，不支持透明
- PNG：适合图标或需要透明背景的图像
- WebP：现代格式，压缩率高，兼具透明和动画支持
- SVG：矢量图，适合可缩放的图标或图案
background-repeat 控制重复方式
默认情况下，背景图会水平和垂直方向重复铺满整个元素。使用 background-repeat 可以改变这一行为：
- repeat：默认值，图片在横竖两个方向都重复
- no-repeat：图片不重复，只显示一次
- repeat-x：仅在水平方向重复
- repeat-y：仅在垂直方向重复
示例：
平面无缝对称重复形状草图矢量
下载
平面无缝对称重复形状草图矢量适用于室内装饰、建筑外观设计、园林景观设计、历史建筑修复、文化遗址保护、艺术展览布置、图案设计教学、个人DIY项目以及与建筑装饰和图案设计相关设计的AI格式素材。
div {
background-image: url('logo.png');
background-repeat: no-repeat;
}
常用组合写法简化代码
CSS 提供 background 简写属性，可以一次性设置图片、重复、位置等：
- background: url('bg.jpg') no-repeat center; — 图片居中且不重复
- background: url('pattern.png') repeat-x top; — 顶部水平平铺
简写顺序通常为：颜色 → 图片 → 重复 → 位置 → 附着（scroll/fixed）
实用建议
为了提升加载速度和显示效果，注意以下几点：
- 优先使用 WebP 格式，在支持的浏览器中节省带宽
- 添加备用格式，用多背景或条件判断降级处理
- 对于大背景图，建议搭配 background-size: cover 避免拉伸失真
- 小图标或纹理图，可设 no-repeat 并精确定位
基本上就这些。掌握 background-image 和 background-repeat 的设置，再结合其他背景属性，就能灵活控制网页背景的呈现方式。
