CSS3的background-size属性用于设置背景图片的尺寸大小。通过该属性，可以控制背景图片的宽度和高度，使其适应不同的容器。同时，使用background-size还可以实现背景图片的拉伸、缩放、平铺等效果。这个属性的灵活运用为网页设计带来了更多可能性，使背景图片更加适应多样化的视觉呈现要求。
CSS3中的background-size属性可以用于设置背景图片的尺寸大小。在过去，我们只能通过使用外部图像编辑软件来调整背景图片的大小，然后将其应用到网页中。然而，随着CSS3的发展，我们现在可以直接在CSS中使用background-size属性来控制背景图片的大小。
基本语法
background-size属性有两个值，分别是关键字和长度数值（百分比或像素值）。
关键字的可选值有：
– contain：保持原始图片的纵横比从而将图片缩放至适应容器的尺寸内，可能导致图片不会填满容器。
– cover：保持原始图片的纵横比从而将图片缩放至完全覆盖容器，可能导致图片溢出容器范围。
使用百分比
当我们将background-size设置为百分比值时，它将根据容器大小来调整背景图片的尺寸。例如，如果我们将background-size设置为50%，那么图片的宽度和高度将相对于容器的宽度和高度减小一半。
举个例子，假设我们有一个容器宽度为400px，高度为300px，并且背景图片的原始大小是800px乘以600px。将background-size设置为50%将会使背景图片的宽度和高度都减小为原始大小的50%，即400px乘以300px。
使用像素值
除了百分比，我们还可以使用像素值来设置background-size。这就允许我们精确地指定背景图片的宽度和高度。
例如，如果我们设置background-size为200px 150px，那么背景图片将被调整为宽度为200像素，高度为150像素的大小。
适应容器
如前所述，关键字关键词contain和cover可以用于调整背景图片以适应容器的尺寸。
当我们将background-size设置为contain时，背景图片将按比例缩放，以适应容器的尺寸。这意味着图片的某一边可能会与容器边缘有留白，从而不能填充整个容器。
相反，当我们将background-size设置为cover时，背景图片将按比例放大或缩小，以完全覆盖整个容器。这可能导致图片的某一边溢出容器的范围。
背景图片的定位
在使用background-size调整背景图片尺寸的同时，我们还可以使用background-position属性来调整图片在容器内的定位。
background-position属性可以通过指定关键字（如left，center，right，top，center，bottom）或像素值来设置背景图片的位置。例如，background-position: center center将图片放置在容器的中央。
总结
CSS3的background-size属性提供了一种简单且灵活的方法来调整背景图片的尺寸。无论是通过百分比还是像素值，我们都可以根据需要来缩放或裁剪背景图片。同时，关键字contain和cover使得我们可以很容易地调整背景图片以适应容器的大小。background-position属性还可以用来精确地控制背景图片在容器内的位置。
