CSS背景图片大小调整完全指南

CSS背景图片大小调整完全指南

在网页设计中，背景图片的大小调整是一个常见的需求。本文将详细介绍如何使用CSS的background-size属性来实现这一功能，包括使用固定像素值、contain和cover等关键字。通过具体的代码示例和视觉效果展示，帮助前端开发者更好地掌握这一技巧。

使用固定像素值调整背景图片大小

CSS属性background-size可以用于调整元素的背景图片大小，通过指定图像的宽度和/或高度，覆盖默认的以全尺寸平铺图像的行为。通过这样做，你可以根据需要放大或缩小图像。

让我们考虑一张大图片，一张 2982x2808 的 Firefox 标志图片。我们想（由于某种原因，可能涉及到可怕的糟糕的网站设计）将这个图片的四个副本平铺到一个 300x300 像素的元素中。要做到这一点，我们可以使用一个固定的 150 像素的 background-size 值。

<div class="tiledBackground"></div>

.tiledBackground {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: 150px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  color: pink;
}

你也可以像这样同时指定图像的水平和垂直尺寸：

background-size: 300px 150px;

结果看起来像这样：

你可以在背景中放大图像。在这里，我们将 32x32 像素大小的 favicon 放大到了 300x300 像素：

.square2 {
  background-image: url(favicon.png);
  background-size: 300px;
  width: 300px;
  height: 300px;
  border: 2px solid;
  text-shadow: white 0px 0px 2px;
  font-size: 16px;
}

正如你所看到的，CSS 实际上基本上是相同的，除了图像文件的名称。

使用contain关键字调整背景图片大小

contain值指定，无论包含的盒子大小如何，背景图像都应该被缩放，使每一面都尽可能大，同时不超过容器相应一面的长度。试着调整下面这个例子的大小，观察 contain 值的效果。

HTML

<div class="bgSizeContain">
  <p>试着缩放这个元素！</p>
</div>

CSS

.bgSizeContain {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: contain;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}

使用cover关键字调整背景图片大小

cover值指定背景图片的大小，使其尽可能的小，同时确保两个尺寸都大于或等于容器的相应尺寸。试着调整下面这个例子的大小，观察 cover 值的效果。

HTML

<div class="bgSizeCover">
  <p>试着缩放这个元素！</p>
</div>

CSS

.bgSizeCover {
  background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png);
  background-size: cover;
  width: 160px;
  height: 160px;
  border: 2px solid;
  color: pink;
  resize: both;
  overflow: scroll;
}