background-size

**background-size** CSS 属性设置元素背景图像的大小。图像可以保留其自然大小、拉伸或约束以适合可用空间。

试一试

背景图像未覆盖的空间将填充 background-color 属性，并且背景颜色将显示在具有透明度/半透明度的背景图像后面。

语法

css
/* 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() 函数创建的背景图像使用生成元素的固有尺寸和比例。

注意：在 Gecko 中，使用 element() 函数创建的背景图像当前被视为具有元素尺寸或（如果元素是 SVG）背景定位区域尺寸的图像，并具有相应的固有比例。这是一种非标准行为。

根据固有尺寸和比例，背景图像的渲染尺寸计算如下

  • 如果 background-size 的两个组件都已指定且都不为 auto：背景图像将以指定的尺寸进行渲染。
  • 如果 background-size 为 contain 或 cover：在保持其固有比例的同时，图像将以包含在背景定位区域内或覆盖背景定位区域的最大尺寸进行渲染。如果图像没有固有比例，则它将以背景定位区域的尺寸进行渲染。
  • 如果 background-size 为 auto 或 auto auto
    • 如果图像同时具有水平和垂直固有尺寸，则它将以该尺寸进行渲染。
    • 如果图像没有固有尺寸且没有固有比例，则它将以背景定位区域的尺寸进行渲染。
    • 如果图像没有固有尺寸但具有固有比例，则它将像指定了 contain 一样进行渲染。
    • 如果图像只有一个固有尺寸且具有固有比例，则它将以对应于该一个尺寸的尺寸进行渲染。另一个尺寸将使用指定的尺寸和固有比例进行计算。
    • 如果图像只有一个固有尺寸但没有固有比例，则它将使用指定的尺寸和背景定位区域的另一个尺寸进行渲染。

    注意：SVG 图像具有 preserveAspectRatio 属性，该属性默认为等效于 contain 的值；显式 background-size 将导致忽略 preserveAspectRatio。

  • 如果 background-size 具有一个 auto 组件和一个非 auto 组件
    • 如果图像具有固有比例，则它将被拉伸到指定的尺寸。未指定的尺寸将使用指定的尺寸和固有比例进行计算。
    • 如果图像没有固有比例，则它将被拉伸到指定的尺寸。未指定的尺寸将使用图像的相应固有尺寸（如果存在）进行计算。如果没有这样的固有尺寸，则它将成为背景定位区域的相应尺寸。

注意：对于缺少固有尺寸或比例的矢量图像，背景大小在所有浏览器中尚未完全实现。请谨慎依赖上述行为，并在多个浏览器中进行测试以确保结果是可以接受的。

正式定义

初始值auto auto
应用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承否
百分比相对于背景定位区域
计算值如指定，但将相对长度转换为绝对长度
动画类型可重复列表

正式语法

background-size = 
  <bg-size>#  

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

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

示例

平铺大型图像

让我们考虑一个大型图像，一个 2982x2808 的 Firefox logo 图像。我们希望将此图像的四个副本平铺到一个 300x300 像素的元素中。为此，我们可以使用 150 像素的固定 background-size 值。

HTML

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

CSS

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

结果

有关更多示例，请参阅 调整背景图像大小。

规范

规范
CSS 背景和边框模块级别 3
# the-background-size

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅