1. CSS3属性background-size简介
CSS3属性background-size用于设置背景图片的尺寸大小。通过使用background-size属性，可以轻松地控制背景图片在元素内的大小和比例。
1.1 background-size的语法
background-size属性有两种常用的语法形式：
background-size: width height;
/* 或者 */
background-size: value;
其中，width和height可以使用以下单位：像素(px)，百分比(%)，或者关键字值如cover和contain；value可以是单个值（如cover或contain），也可以是由两个值组成的大小（如500px 400px）。
2. 使用background-size控制背景图片尺寸
2.1 设置背景图片覆盖整个元素
通过设置background-size为cover，可以让背景图片自动缩放以适应元素的大小，从而覆盖整个元素。这在创建全屏背景图片效果时非常有用。
.element {
background-image: url("image.jpg");
background-size: cover;
}
在上述代码中，背景图片将自动缩放以适应元素的大小，并保持宽高比例。如果背景图片的宽高比与元素的宽高比不匹配，图片将被裁剪以适应元素的宽高比。
2.2 设置背景图片等比例缩放
通过设置background-size为包含百分比值的单个值，可以让背景图片等比例缩放以适应元素的大小。
.element {
background-image: url("image.jpg");
background-size: 50%;
}
在上述代码中，背景图片将被缩放至元素宽度的50%。这样，无论元素的宽度如何变化，背景图片的宽度都将保持为元素宽度的50%。
2.3 设置背景图片具体尺寸
通过设置background-size为具体的像素值，可以直接控制背景图片的尺寸。
.element {
background-image: url("image.jpg");
background-size: 300px 200px;
}
在上述代码中，背景图片的尺寸将被设置为300像素宽和200像素高。如果背景图片的大小与元素的大小不匹配，图片将被拉伸以适应元素的大小。
3. background-size的其他属性值
3.1 contain
通过设置background-size为contain，可以使背景图片自动缩放以完全包含在元素的边界内。
.element {
background-image: url("image.jpg");
background-size: contain;
}
在上述代码中，背景图片将自动缩放以保持其宽高比例，并确保整个图片都在元素的边界内可见。
3.2 multiple background images
通过使用逗号分隔的多个背景图片，可以为一个元素设置多个背景层。可以针对每个背景层分别设置background-size属性。
.element {
background-image: url("image1.jpg"), url("image2.jpg");
background-size: 50% auto, cover;
}
在上述代码中，元素将有两个背景层，第一个图片将被缩放至元素宽度的50%；第二个图片将自动缩放以覆盖整个元素。
4. 注意事项
在使用background-size属性时，要注意以下几点：
background-size属性在CSS3中才被引入，所以在旧版本的浏览器中可能不被支持。
background-size属性只适用于具有背景图片的元素。
对于cover和contain关键字，会自动调整背景图片的宽高比例，以便完整地显示图片。
在某些情况下，图片可能会被拉伸或压缩以适应元素的大小，这可能导致图片失真。
5. 总结
通过使用CSS3属性background-size，我们可以轻松地控制背景图片的尺寸大小，从而创建各种各样的视觉效果。无论是让背景图片覆盖整个元素、等比例缩放还是设置具体尺寸，background-size都能提供灵活的解决方案。但要注意兼容性和图片失真的问题，以便在不同的浏览器环境中获得一致的效果。