如何在 CSS 中更改背景图像的宽度

在 CSS 中，我们可以通过属性 background-size 来更改背景图像的宽度和高度。

语法

background-size: width height;

其中 width 和 height 可以取以下值：

• auto：默认值，背景图片按原比例显示。
• length：指定长度值，如 100px，将会按照指定长度值缩放背景图片。
• percentage：指定百分比值，如 50%，将会按照容器的百分之多少来缩放背景图片。
• cover：背景图片会缩放并裁剪，保证图片完全覆盖容器。
• contain：背景图片将缩放并且不会裁剪，保证整张图片能完整显示，并且至少有一条边紧贴容器边缘。

示例

在以下示例中，我们使用 background-size 来更改背景图像的宽度为 200px，高度自适应。

.element {
  background-image: url('background.jpg');
  background-size: 200px auto;
}

如果要将背景图片的宽度与容器的宽度相同，可以使用 100%。

.element {
  background-image: url('background.jpg');
  background-size: 100% auto;
}

如果要将背景图片完全覆盖容器，可以使用 cover。

.element {
  background-image: url('background.jpg');
  background-size: cover;
}

如果要将背景图片完整显示，并且至少有一条边紧贴容器边缘，可以使用 contain。

.element {
  background-image: url('background.jpg');
  background-size: contain;
}

总结

通过使用 background-size 属性，我们可以轻松地更改背景图像的宽度和高度，使其适应不同的容器大小。