background-size用于控制背景图尺寸，可设cover（覆盖裁剪）或contain（完整显示），支持像素、百分比等值，常用于响应式设计。
在CSS中，background-size 属性用于控制背景图片的尺寸。通过它，你可以让背景图适应容器大小、保持比例拉伸，或进行裁剪显示。这个属性对响应式设计特别有用。
基本语法
background-size 可以接受一个或两个值：
- 如果提供一个值，表示宽度，高度自动为 "auto"
- 如果提供两个值，第一个是宽度，第二个是高度
常用取值方式
1. 关键字：cover 和 contain
-
cover： 背景图等比缩放，完全覆盖容器。可能会有部分图片被裁剪。
contain： 背景图等比缩放，完整显示在容器内。可能会留白。
示例：
立即学习“前端免费学习笔记（深入）”；
div {
background-image: url('image.jpg');
background-size: cover;
background-position: center;
height: 300px;
}
这常用于全屏背景图，确保图片填满整个区域。
2. 具体尺寸：像素、百分比、rem 等
-
固定尺寸： background-size: 200px 150px; —— 设置具体宽高
百分比： background-size: 50% 100%; —— 相对于容器的尺寸
注意：百分比是相对于元素的背景定位区域（通常是 padding box）。
3. auto 值
-
background-size: auto; —— 使用图片原始尺寸
background-size: 100px auto; —— 宽度设为100px，高度按比例调整
实用技巧
-
响应式背景图： 用 cover 或 100% 100% 配合 background-position:center 实现居中填充
图标适配： 在小图标上使用精确像素值，如 background-size: 16px 16px;
避免变形： 尽量使用 cover、contain 或保持一个方向为 auto 来维持图片比例
基本上就这些。合理使用 background-size 能让你的背景图在各种设备上都表现良好。不复杂但容易忽略细节。
