通过background-repeat和background-size可控制背景图平铺与尺寸。1. background-repeat取值有repeat、no-repeat、repeat-x、repeat-y、space、round，用于设置图像平铺方式；2. background-size取值包括auto、具体宽高、百分比、cover、contain，用于调整图像大小；3. 结合使用可实现如全屏背景图效果，常配background-position:center，使图像居中覆盖容器，提升页面视觉体验。
在网页设计中，背景图的显示效果对整体视觉体验影响很大。通过 background-repeat 和 background-size 这两个CSS属性，可以灵活控制背景图像的平铺方式和尺寸，让页面更美观、适配性更强。
background-repeat：控制背景图是否平铺
默认情况下，背景图会沿着水平和垂直方向重复平铺。使用 background-repeat 可以修改这一行为。
常用取值：- repeat：默认值，图像在横向和纵向都平铺
- no-repeat：图像不平铺，只显示一次
- repeat-x：只在水平方向平铺
- repeat-y：只在垂直方向平铺
- space：图像不裁剪，用空白间距填满容器
- round：图像缩放以适应空间，避免留白
例如，设置一个不平铺的背景图：
div {
background-image: url('bg.jpg');
background-repeat: no-repeat;
}
background-size：调整背景图尺寸
这个属性用于定义背景图像的大小，特别适合响应式设计，让图片在不同设备上都能良好展示。
立即学习“前端免费学习笔记（深入）”；
常见取值：
- auto：保持原始尺寸（默认）
- 100px 200px：指定具体宽高（可分别设置宽高）
- 50% 100%：按容器百分比缩放
- cover：等比例缩放图像，完全覆盖容器，可能裁剪
- contain：等比例缩放，完整显示图像，可能留白
比如让背景图撑满整个元素：
div {
background-image: url('hero.jpg');
background-repeat: no-repeat;
background-size: cover;
}
结合使用实现理想效果
实际开发中，这两个属性常一起设置。例如做一个全屏背景图区域：
.hero-section {
width: 100%;
height: 100vh;
background-image: url('landscape.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
这样能确保背景图居中显示、充满视口，且不会重复出现。
基本上就这些。掌握 background-repeat 和 background-size 的搭配，就能轻松处理大多数背景图需求，让页面看起来更专业、更协调。
