【CSS】background-size属性的作用是什么，怎么使用

background-size属性的作用：

background-size属性在CSS中用于设置背景图像的尺寸。在CSS3之前，背景图片的尺寸是由图片的实际尺寸决定的。而在CSS3中，background-size属性允许我们规定背景图片的尺寸，这使得我们能够在不同的环境中重复使用背景图片，并根据需要进行尺寸调整。

background-size属性的使用：

background-size属性接受以下四种类型的值来设置背景图片的尺寸：

length：具体数值，用于设置背景图片的具体宽度和高度。例如：background-size: 100px 200px; 将设置背景图片的宽度为100像素，高度为200像素。如果只设置一个值，则第二个值会被设置为 “auto”。
percentage：百分比，用于以父元素的百分比来设置背景图片的宽度和高度。例如：background-size: 50% 50%; 将设置背景图片的宽度和高度为父元素宽度和高度的50%。如果只设置一个值，则第二个值会被设置为 “auto”。
cover：该值会将背景图片扩展至足够大，以使背景图片完全覆盖背景区域。此时，背景图片的某些部分可能无法显示在背景定位区域中。
contain：该值会将背景图片扩展至最大尺寸，以使其宽度和高度完全适应内容区域。此时，背景图片可能无法完全覆盖背景区域。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
div {background: url('your-image.jpg');background-size: cover; /* 使用cover值，使背景图片完全覆盖div区域 */background-repeat: no-repeat; /* 不重复背景图片 */
}
</style>
</head>
<body><div style="width:500px;height:300px;"><!-- 这里是一个div元素，背景图片将完全覆盖这个区域 -->
</div></body>
</html>