path: root/files/zh-cn/web/css/background-size/index.html

---
title: background-size
slug: Web/CSS/background-size
tags:
  - CSS
  - CSS Background
  - 背景
translation_of: Web/CSS/background-size
---
<div>{{CSSRef}}</div>

<p><code>background-size</code> 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。</p>

<p>{{EmbedInteractiveExample("pages/css/background-size.html")}}</p>

<div class="hidden">
<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>

<pre class="notranslate">/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度<strong> */</strong>
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto     /* 不同于background-size: auto auto */
background-size: 50%, 25%, 25%
background-size: 6px, auto, contain

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;</pre>

<div id="background-size">
<pre class="hidden brush: html notranslate">&lt;div id="container"&gt;

  &lt;div class="subcontainer contain"&gt;contain&lt;/div&gt;
  &lt;div class="subcontainer cover"&gt;cover&lt;/div&gt;
  &lt;div class="subcontainer width"&gt;120px&lt;/div&gt;
  &lt;div class="subcontainer width-height"&gt;120px 200px&lt;/div&gt;



&lt;/div&gt;


</pre>

<pre class="hidden brush: css notranslate">#container {
   width: 100%;
   display:flex;
   justify-content: space-around;
   height: 300px;
   overflow: scroll;
   background-color: #EEEEEE;
}

.subcontainer {
  width: 100%;
  max-width: 200px;
  margin: 8px;
  padding: 5px;
  background-color: white;
  background-image: url("https://mdn.mozillademos.org/files/15195/eagle.jpg");
  background-repeat: no-repeat;
  color: white;
  font-family: monospace;
}

.contain {
  background-size: contain;
}

.cover {
  background-size: cover;
}

.width {
  background-size: 120px;
}

.width-height {
  background-size: 120px 200px;
}
</pre>
</div>

<p>{{EmbedLiveSample("background-size", 1200, 300, "", "", "example-outcome-frame")}}</p>

<p>注意：没有被背景图片覆盖的背景区域仍然会显示用{{cssxref("background-color")}}属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来。</p>

<p>{{cssinfo}}</p>

<h2 id="语法">语法</h2>

<p>单张图片的背景大小可以使用以下三种方法中的一种来规定：</p>

<ul>
 <li>使用关键词 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size$edit#contain">contain</a></code></li>
 <li>使用关键词 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size$edit#cover">cover</a></code></li>
 <li>设定宽度和高度值</li>
</ul>

<p>当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:</p>

<ul>
 <li>如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为<code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size$edit#auto">auto</a>。</code></li>
 <li>如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。</li>
</ul>

<p><code><font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">每个值可以是</span></font><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size$edit#length">&lt;length&gt;</a></code>, 是 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size$edit#&lt;percentage>">&lt;percentage&gt;</a></code>, 或者 <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size$edit#auto">auto</a></code>.<br>
 <br>
 示例：</p>

<pre class="notranslate"><code>background-size: contain;

background-size: 50%;
background-size: 3em;

background-size: auto 1em;
background-size: 50% 25%;</code></pre>

<p><br>
 为了设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔。</p>

<pre class="notranslate"><code>background-size: 50% 25%, contain, 3em;</code></pre>

<h3 id="属性值">属性值</h3>

<dl>
 <dt><code>&lt;length&gt;</code></dt>
 <dd><code>{{cssxref("&lt;length&gt;")}}</code> 值，指定背景图片大小，不能为负值。</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd><code>{{cssxref("&lt;percentage&gt;")}}</code> 值，指定背景图片相对背景区（background positioning area）的百分比。背景区由{{cssxref("background-origin")}}设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果{{cssxref("background-attachment","attachment")}} 为<code>fixed</code>，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。</dd>
 <dt><code>auto</code></dt>
 <dd>以背景图片的比例缩放背景图片。</dd>
 <dt><code>cover</code></dt>
 <dd>缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 <code>contain</code> 值相反，<code>cover</code> 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。</dd>
 <dt><code>contain</code></dt>
 <dd>缩放背景图片以完全装入背景区，可能背景区部分空白。<code>contain</code> 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。</dd>
</dl>

<p>位图一定有固有尺寸与固有比例，矢量图可能两者都有，也可能只有一个。渐变视为只有固有尺寸或者只有固有比例的图片。</p>

<div class="geckoVersionNote">
<p>{{gecko_callout_heading("8.0")}}</p>

<p>This behavior changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, gradients were treated as images with no intrinsic dimensions, with an intrinsic proportion identical to that of the background positioning area.</p>
</div>

<p>由 {{cssxref("-moz-element")}} 生成的背景图片，(which actually match an element) are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion.</p>

<div class="note"><strong>Note:</strong> This is not the currently-specified behavior, which is that the intrinsic dimensions and proportion should be those of the element in all cases.</div>

<p>背景图片大小计算：</p>

<dl>
 <dt>如果指定了 <code>background-size</code> 的两个值并且不是<code>auto</code>：</dt>
 <dd>背景图片按指定大小渲染。</dd>
 <dt><code>contain</code> 或 <code>cover</code>:</dt>
 <dd>保留固有比例，最大的包含或覆盖背景区。如果图像没有固有比例，则按背景区大小。</dd>
 <dt><code>auto</code> 或 <code>auto auto</code>:</dt>
 <dd>图像如果有两个长度，则按这个尺寸。如果没有固有尺寸与固有比例，则按背景区的大小。如果没有固有尺寸但是有固有比例， 效果同 <code>contain</code>。如果有一个长度与比例，则由此长度与比例计算大小。如果有一个长度但是没有比例，则使用此长度与背景区相应的长度。</dd>
 <dt>一个为 <code>auto</code> 另一个不是auto:</dt>
 <dd>如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值与固有比例计算。如果图像没有固有比例，则指定的长度使用指定值，未指定的长度使用图像相应的固有长度，若没有固有长度，则使用背景区相应的长度。</dd>
</dl>

<p>注意，对于没有固有尺寸或固有比例的矢量图不是所有的浏览器都支持。特别注意测试Firefox 7- 与Firefox 8+，以确定不同之处能否接受。</p>

<h3 id="Formal_syntax">Formal syntax</h3>

<p><a href="https://developer.mozilla.org/docs/Web/CSS/Value_definition_syntax" lang="en">如何阅读 CSS 语法。</a></p>

{{csssyntax}}

<h2 id="案例">案例</h2>

<p><a href="http://whereswalden.com/files/mozilla/background-size/page-cover.html"><code>background-size: cover 演示</code></a> 与 <a href="http://whereswalden.com/files/mozilla/background-size/page-contain.html"> <code>background-size: contain 演示</code></a> 在新窗口打开，这样你可以看到当背景区大小变化时 <code>contain</code> 与 <code>cover</code> 是怎样的。 <a href="http://whereswalden.com/files/mozilla/background-size/more-examples.html">系列演示：<code>background-size</code> 及其与<code>background-*属性</code>的关联 </a> 很好的说明了单独使用 <code>background-size</code> 及与其它属性共同使用。</p>

<h2 id="备注">备注</h2>

<p>如果用渐变作为背景并且对它使用了<code>background-size</code> ，最好不要只用一个auto， 或者只指定一个宽度值 (例如 <code>background-size: 50%</code>)。对这两种情况 Firefox 8有所改变， 并且目前各浏览器表现不一致，不是全部浏览器都完全支持 <a href="http://www.w3.org/TR/css3-background/#the-background-size" title="http://www.w3.org/TR/css3-background/#the-background-size">CSS3 <code>background-size</code> 规范</a> 与 <a href="http://dev.w3.org/csswg/css3-images/#gradients" title="http://dev.w3.org/csswg/css3-images/#gradients">CSS3 Image Values gradient 规范</a> 。</p>

<pre class="brush: css notranslate">.bar {
       width: 50px; height: 100px;
       background-image: gradient(...);

       /* 不推荐 */
       background-size: 25px;
       background-size: 50%;
       background-size: auto 50px;
       background-size: auto 50%;

       /* 可行 */
       background-size: 25px 50px;
       background-size: 50% 50%;
}
</pre>

<p>特别不推荐对渐变px与<code>auto</code>一起用, 因为Firefox 8之前不能重复渲染，并且对于没有实现Firefox 8渲染特性的浏览器，不知道指定了背景的元素的确切大小。</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">说明</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<p>{{Compat("css.properties.background-size")}}</p>

<div>
<h2 id="Polyfills_and_Workarounds">Polyfills and Workarounds</h2>

<h3 id="For_Internet_Explorer_prior_IE8">For Internet Explorer prior IE8</h3>

<p>Though Internet Explorer 8 doesn't support the <code>background-size</code> property, it is possible to emulate some of its functionality using the non-standard <code>-ms-filter</code> property:</p>

<pre class="brush:css notranslate">-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";</pre>

<p>This simulates the value <code>cover</code>.</p>
</div>

<div>
<h3 id="In_Firefox_3.5">In Firefox 3.5</h3>

<p>While this property was added in Firefox 3.6, it is possible to stretch a image fully over the background in Firefox 3.5 by using {{cssxref("-moz-border-image")}}.</p>
</div>

<pre class="brush:css notranslate">.foo {
  background-image: url(bg-image.png);

  -webkit-background-size: 100% 100%;           /* Safari 3.0 */
     -moz-background-size: 100% 100%;           /* Gecko 1.9.2 (Firefox 3.6) */
       -o-background-size: 100% 100%;           /* Opera 9.5 */
          background-size: 100% 100%;           /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

  -moz-border-image: url(bg-image.png) 0;    /* Gecko 1.9.1 (Firefox 3.5) */
}
</pre>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
 <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Multiple backgrounds</a></li>
 <li><a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></li>
</ul>