CSS背景图片大小调整：background-size属性详解

CSS背景图片大小调整：background-size属性详解

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值的效果。

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值的效果。

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;
}

结果