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

---
title: background
slug: Web/CSS/background
tags:
  - CSS
  - CSS 属性
  - CSS 背景
  - 参考
translation_of: Web/CSS/background
---
<div>{{CSSRef("CSS Background")}}</div>

<p><span class="seoSummary"><strong><code>background</code></strong> 是一种 <a href="/en-US/docs/Web/CSS">CSS</a> 简写属性，用于一次性集中定义各种背景属性，包括 color, image, origin 与 size, repeat 方式等等。</span></p>

<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>



<p>此属性是一个 <a href="/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性</a>，可以在一次声明中定义一个或多个属性：{{cssxref("background-clip")}}、{{cssxref("background-color")}}、{{cssxref("background-image")}}、{{cssxref("background-origin")}}、{{cssxref("background-position")}}、{{cssxref("background-repeat")}}、{{cssxref("background-size")}}，和 {{cssxref("background-attachment")}}。</p>

<p>对于所有简写属性，任何没有被指定的值都会被设定为它们的 <a href="/zh-CN/docs/Web/CSS/initial_value">初始值</a>。</p>

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

<pre class="brush: css no-line-numbers">/* 使用 &lt;background-color&gt; */
background: green;

/* 使用 &lt;bg-image&gt; 和 &lt;repeat-style&gt; */
background: url("test.jpg") repeat-y;

/* 使用 &lt;box&gt; 和 &lt;background-color&gt; */
background: border-box red;

/* 将背景设为一张居中放大的图片 */
background: no-repeat center/80% url("../img/image.png");
</pre>

<p><code>background</code> 属性被指定多个背景层时，使用逗号分隔每个背景层。</p>

<p>每一层的语法如下：</p>

<ul>
 <li>在每一层中，下列的值可以出现 0 次或 1 次：
  <ul>
   <li><code><a href="#&lt;attachment>">&lt;attachment&gt;</a></code></li>
   <li><code><a href="#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
   <li><code><a href="#&lt;position>">&lt;position&gt;</a></code></li>
   <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
   <li><code><a href="#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
  </ul>
 </li>
 <li><code><a href="#&lt;bg-size>">&lt;bg-size&gt;</a></code> 只能紧接着 <code><a href="#&lt;position>">&lt;position&gt;</a></code> 出现，以"/"分割，如： "<code>center/80%</code>".</li>
 <li><code><a href="#&lt;box>">&lt;box&gt;</a></code> 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定 {{cssxref("background-origin")}} 和 {{cssxref("background-clip")}}。如果出现 2 次，第一次的出现设置 {{cssxref("background-origin")}}，第二次的出现设置 {{cssxref("background-clip")}}。</li>
 <li><code><a href="#&lt;background-color>">&lt;background-color&gt;</a></code> 只能被包含在最后一层。</li>
</ul>

<div class="note"><strong>注意:</strong>  {{cssxref("background-color")}} 只能在background的最后一个属性上定义，因为整个元素只有一种背景颜色。</div>

<h2 id="值">值</h2>

<p>下面的一个或多个值，可以按任意顺序放置：</p>

<dl>
 <dt id="&lt;attachment>"><code>&lt;attachment&gt;</code></dt>
 <dd>参见 {{ cssxref("background-attachment") }}</dd>
 <dt id="&lt;box>"><code>&lt;box&gt;</code></dt>
 <dd>参见 {{ cssxref("background-clip") }} 和 {{cssxref("background-origin")}}</dd>
 <dt id="&lt;background-color>"><code>&lt;background-color&gt;</code></dt>
 <dd>参见 {{ cssxref("background-color") }}</dd>
 <dt id="&lt;bg-image>"><code>&lt;bg-image&gt;</code></dt>
 <dd>参见 {{ Cssxref("background-image") }}</dd>
 <dt id="&lt;position>"><code>&lt;position&gt;</code></dt>
 <dd>参见 {{ cssxref("background-position") }}</dd>
 <dt id="&lt;repeat-style>"><code>&lt;repeat-style&gt;</code></dt>
 <dd>参见 {{ cssxref("background-repeat") }}</dd>
 <dt id="&lt;bg-size>"><code>&lt;bg-size&gt;</code></dt>
 <dd>参见 {{ cssxref("background-size") }}。</dd>
</dl>

<h3 id="标准语法">标准语法</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

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

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p class="topbanner"&gt;
  Starry sky&lt;br/&gt;
  Twinkle twinkle&lt;br/&gt;
  Starry sky
&lt;/p&gt;
&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush:css' highlight:[2,6];">.warning {
  background: red;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}
</pre>

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample("Examples")}}</p>

<h2 id="规范">规范</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', 'background') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>此简写属性已经扩展出了多重背景和诸如 {{ cssxref("background-size")}}，{{cssxref("background-origin")}} 与 {{ cssxref("background-clip")}} 等新属性。</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'colors.html#propdef-background', 'background') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>无重大修改</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#background', 'background') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

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

<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>

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

<h2 id="See_also" name="See_also">参见</h2>

<ul>
 <li>{{ cssxref("-moz-background-size") }}, {{ cssxref("-moz-background-inline-policy") }}</li>
 <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_gradients" title="Using gradients">使用渐变背景</a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">多重背景 </a></li>
</ul>