background-size

试一试

background-size: contain;

background-size: contain;
background-repeat: no-repeat;

background-size: cover;

background-size: 30%;

background-size: 200px 100px;

<section id="default-example">
  <div class="transition-all" id="example-element"></div>
</section>

#example-element {
  background-image: url("/shared-assets/images/examples/hand.jpg");
  min-width: 100%;
  min-height: 100%;
}

没有被背景图片覆盖的空间会由 background-color 属性填充，并且当背景图片具有透明/半透明特性时，背景颜色将透过图片显示出来。

语法

/* Keyword values */
background-size: cover;
background-size: contain;

/* One-value syntax */
/* the width of the image (height becomes 'auto') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;

/* Two-value syntax */
/* first value: width of the image, second value: height */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;

/* Multiple backgrounds */
background-size: auto, auto; /* Not to be confused with `auto auto` */
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;

/* Global values */
background-size: inherit;
background-size: initial;
background-size: revert;
background-size: revert-layer;
background-size: unset;

background-size 属性可以通过以下几种方式之一来指定：

• 使用关键字值 contain 或 cover。
• 仅使用一个宽度值，此时高度值默认为 auto。
• 同时使用宽度和高度值，此时第一个值设置宽度，第二个值设置高度。每个值都可以是 <length>、<percentage> 或 auto。

要为多个背景图片指定尺寸，请用逗号分隔每个图片对应的值。

值

contain

在不裁剪或拉伸图片的前提下，将图片缩放到容器内尽可能大的尺寸。如果容器比图片大，这会导致图片平铺，除非 background-repeat 属性被设置为 no-repeat。

cover

将图片（同时保持其比例）缩放到能完全覆盖容器的最小尺寸（即：其高度和宽度都完全覆盖容器），不留任何空白区域。如果背景图片的比例与元素的比例不同，图片将会被垂直或水平裁剪。

auto

在相应的方向上缩放背景图片，以保持其固有的比例。

<length>

在相应的维度上将图片拉伸到指定的长度。不允许使用负值。

<percentage>

在相应的维度上将图片拉伸到背景定位区域的指定百分比。背景定位区域由 background-origin 的值决定（默认为内边距框）。但是，如果背景的 background-attachment 值为 fixed，则定位区域为整个视口。不允许使用负值。

固有尺寸和比例

值的计算取决于图片的固有尺寸（宽度和高度）和固有比例（宽高比）。这些属性如下：

• 位图图片（如 JPG）总是有固有的尺寸和比例。
• 矢量图片（如 SVG）不一定有固有尺寸。如果它同时具有水平和垂直的固有尺寸，那么它也具有固有比例。如果它没有尺寸或只有一个尺寸，它可能有也可能没有比例。
• CSS <gradient>（渐变）没有固有尺寸或固有比例。
• 使用 element() 函数创建的背景图片使用生成元素的固有尺寸和比例。

基于固有尺寸和比例，背景图片的渲染尺寸计算如下：

• 如果 background-size 的两个分量都被指定且不为 auto： 背景图片将按指定的尺寸渲染。

• 如果 background-size 是 contain 或 cover： 在保持其固有比例的同时，图片会以包含在背景定位区域内或覆盖背景定位区域的最大尺寸进行渲染。如果图片没有固有比例，则会以背景定位区域的尺寸进行渲染。

• 如果 background-size 是 auto 或 auto auto

  • 如果图片同时具有水平和垂直的固有尺寸，它将按该尺寸渲染。
  • 如果图片没有固有尺寸也没有固有比例，它将按背景定位区域的尺寸渲染。
  • 如果图片没有固有尺寸但有固有比例，它的渲染方式就好像指定了 contain 一样。
  • 如果图片只有一个固有尺寸且有固有比例，它将按该单一尺寸渲染。另一个尺寸将使用指定的尺寸和固有比例计算得出。
  • 如果图片只有一个固有尺寸但没有固有比例，它将使用指定的尺寸和背景定位区域的另一个维度进行渲染。

  备注： SVG 图片有一个 preserveAspectRatio 属性，其默认值等同于 contain；显式指定 background-size 会导致 preserveAspectRatio 被忽略。

• 如果 background-size 有一个 auto 分量和一个非 auto 分量

  • 如果图片有固有比例，它将被拉伸到指定的尺寸。未指定的尺寸将使用指定的尺寸和固有比例计算得出。
  • 如果图片没有固有比例，它将被拉伸到指定的尺寸。未指定的尺寸将使用图片相应的固有尺寸（如果存在）计算得出。如果没有这样的固有尺寸，它将成为背景定位区域的相应尺寸。

正式定义

正式语法

background-size = 
  <bg-size>#  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<length-percentage> = 
  <length>      |
  <percentage>  

示例

平铺大图

让我们来看一张大图，一张 2982x2808 的 Firefox 标志图片。我们想在一个 300x300 像素的元素中平铺这张图片的四个副本。为此，我们可以使用一个固定的 background-size 值，即 150 像素。

HTML

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

CSS

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

结果

更多示例请参见调整背景图片大小。

规范

浏览器兼容性

另见

• 调整背景图片大小
• 缩放 SVG 背景
• object-fit