css中background-size属性使用介绍-猿码集

1. 背景概述

在CSS中，背景是页面的重要组成部分，可以通过设置背景颜色、背景图片以及调整背景的大小、重复方式等来美化页面。其中，background-size属性用于控制背景图像的尺寸。

2. background-size属性的基本语法

background-size: 背景图片宽度背景图片高度;

该属性接受两个参数，分别表示背景图片的宽度和高度。可以使用像素、百分比、关键字（如cover和contain）等单位来定义。

3. 使用像素单位设置背景大小

当使用像素单位时，可以直接指定具体的数值。


.background {
  background-size: 800px 400px;
}

上述代码表示将背景图片的宽度设置为800像素，高度设置为400像素。

3.1 强调重要概念

在上述代码中，像素单位是绝对单位，不会随页面大小的变化而变化，因此适合在固定尺寸的元素或页面中使用。

4. 使用百分比单位设置背景大小

当使用百分比单位时，表示背景图片相对于父元素的尺寸。


.background {
  background-size: 50% 50%;
}

上述代码表示背景图片的宽度设置为父元素宽度的50%，高度设置为父元素高度的50%。

4.1 强调相对性

使用百分比单位进行设置，可以使背景图片随着父元素的变化而自适应。这样可以让页面在不同设备上具有更好的响应性和适应性。

5. 使用cover和contain关键字

cover和contain是background-size属性的两个关键字，用于快速设置背景图片的尺寸。

5.1 cover关键字

使用cover关键字可以确保背景图片覆盖整个背景区域，同时保持图片的原始比例。


.background {
  background-size: cover;
}

上述代码表示背景图片会被拉伸或缩放，以覆盖整个背景区域，从而保持图片的原始比例。

5.2 contain关键字

使用contain关键字可以确保背景图片在保持原始比例的同时，完全显示在背景区域内。


.background {
  background-size: contain;
}

上述代码表示背景图片会被等比缩放，以确保完全显示在背景区域内。

6. 多背景图片的使用

background-size属性同样适用于多背景图片的情况。


.background {
  background-image: url('image1.jpg'), url('image2.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
  background-size: 50% 50%, cover;
}

上述代码表示使用两张背景图片，第一张图片尺寸为父元素宽度的50%和高度的50%，第二张图片采用cover方式。

6.1 组合不同尺寸和类型的背景图片

通过在background-size属性中设置不同的尺寸和类型，可以实现多种绚丽效果。

例如，可以将一张小尺寸的背景图片设置为cover方式，而将另一张大尺寸的背景图片设置为contain方式，从而实现层叠和对比效果。

7. 结论

通过background-size属性，我们可以控制背景图片的尺寸，从而实现不同的视觉效果。无论是使用像素、百分比单位，还是关键字cover和contain，我们都可以根据具体需求来选择最适合的设置方式。同时，background-size属性也可以应用于多背景图片的情况，进一步丰富了背景的呈现效果。

在设计和开发页面时，合理使用background-size属性可以使页面更具吸引力和可读性。

css中background-size属性使用介绍