files/zh-cn/web/css/background/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

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

{{csssyntax}}

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