css中background-size属性使用介绍

当需要控制CSS中的背景图片大小时，就可以使用background-size属性。该属性决定了背景图片的大小。background-size属性可以设置为一个长度、百分数或关键字。

使用长度值设置背景图片大小

使用长度值来设置背景图片的大小非常简单。只需指定宽度和高度的像素值，即可将背景图片大小固定。举个例子，在body标签上设置背景图片大小为400像素宽，200像素高：

body {
  background-image: url('example.jpg');
  background-size: 400px 200px;
}

使用百分比值设置背景图片大小

使用百分比值设置背景图片的大小，能够保证其在不同设备上的适应性。该方法使用background-size属性中的百分数来确定背景图片的大小。同样以body标签为例：

body {
  background-image: url('example.jpg');
  background-size: 50% 50%;
}

上述CSS代码将背景图片的大小设置为屏幕宽度的50%和高度的50%。这使得背景图片在各种设备上的显示效果都很优秀。

关键字设置背景图片大小

在CSS中，可以使用关键字名来指定一个背景图片应该如何自适应尺寸。常见的关键字名有：

• cover：图片将铺满背景，并使其覆盖。但是这样会使图片被裁剪。
• contain：图片将保留比例，在背景中适应最大面积。

以下示例演示如何使用background-size属性将背景图片设置为覆盖整个背景：

body {
    background-image: url('example.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

使用cover关键字使背景图片尽可能地覆盖整个背景。如果图片的高度或宽度比屏幕的宽度大，则会被裁剪。

接下来还是以body标签为例子，于是你可以使用contain关键字将背景图片固定在屏幕中间：

body {
  background-image: url('example.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

请注意，这是一个很基本的示例。如果我们希望在实际应用中使用CSS背景图片，可能还需要进一步调整background-size属性的值，以确保最终呈现出理想的效果。