CSS中的背景大小

CSS提供了设置背景大小的属性，可以让我们对背景进行更精细的控制。

背景大小属性

background-size属性用来控制背景图像的大小，它可以设置一个或两个值，分别表示横向和纵向的背景图像大小。

语法

background-size: length|percentage|cover|contain|initial|inherit;

• length: 设置背景图像的长度，可以是像素（px）、微米（um）等单位。
• percentage: 设置背景图像的百分比大小，相对于容器的宽度和高度。
• cover: 图像会被缩放到足够大以覆盖整个容器，可能会有溢出。
• contain: 图像会被缩放到最大大小以适应容器，可能存在留白。
• initial: 表示使用默认值。
• inherit: 表示继承父元素值。

举例说明

假设我们有以下HTML代码：

<div class="container">
  <div class="bg"></div>
</div>

我们想要给.bg设置一张背景图片，并且将其适当缩放到合适的大小。

设置背景图片

.bg {
  background-image: url("bg.jpg");
}

设置背景大小

固定大小

我们可以使用像素（px）来设置背景图像的固定大小。下面的例子中，我们将横向和纵向的背景图像大小都设置为100像素。

.bg {
  background-size: 100px 100px;
}

百分比大小

我们也可以通过百分比来指定背景图像的大小。下面的例子中，我们将横向和纵向的背景图像大小都设置为容器宽度和高度的一半。

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

cover大小

我们可以使用cover来让背景图像扩展到所有可用空间，并尽可能不改变图像的纵横比例。下面的例子中，我们将背景大小设置为cover，这将会让背景图像扩展到整个容器中，并且不改变图像的比例。

.bg {
  background-size: cover;
}

contain大小

我们可以使用contain来让背景图像尽可能的适应容器大小，但是可能留下空白。下面的例子中，我们将背景大小设置为contain，这将让背景图像适应整个容器并保留其纵横比例。

.bg {
  background-size: contain;
}

结论

background-size是一种强大的属性，可以让我们更好地控制背景图像的大小和显示方式，从而提高用户体验。在实际开发中，我们需要根据不同的需求选择不同的大小设置方式，来达到最佳的视觉效果。