diff options
Diffstat (limited to 'files/zh-cn/web/css/background/index.html')
| -rw-r--r-- | files/zh-cn/web/css/background/index.html | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/files/zh-cn/web/css/background/index.html b/files/zh-cn/web/css/background/index.html new file mode 100644 index 0000000000..a260ec29ae --- /dev/null +++ b/files/zh-cn/web/css/background/index.html @@ -0,0 +1,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">/* 使用 <background-color> */ +background: green; + +/* 使用 <bg-image> 和 <repeat-style> */ +background: url("test.jpg") repeat-y; + +/* 使用 <box> 和 <background-color> */ +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="#<attachment>"><attachment></a></code></li> + <li><code><a href="#<bg-image>"><bg-image></a></code></li> + <li><code><a href="#<position>"><position></a></code></li> + <li><code><a href="#<bg-size>"><bg-size></a></code></li> + <li><code><a href="#<repeat-style>"><repeat-style></a></code></li> + </ul> + </li> + <li><code><a href="#<bg-size>"><bg-size></a></code> 只能紧接着 <code><a href="#<position>"><position></a></code> 出现，以"/"分割，如： "<code>center/80%</code>".</li> + <li><code><a href="#<box>"><box></a></code> 可能出现 0 次、1 次或 2 次。如果出现 1 次，它同时设定 {{cssxref("background-origin")}} 和 {{cssxref("background-clip")}}。如果出现 2 次，第一次的出现设置 {{cssxref("background-origin")}}，第二次的出现设置 {{cssxref("background-clip")}}。</li> + <li><code><a href="#<background-color>"><background-color></a></code> 只能被包含在最后一层。</li> +</ul> + +<div class="note"><strong>注意:</strong> {{cssxref("background-color")}} 只能在background的最后一个属性上定义，因为整个元素只有一种背景颜色。</div> + +<h2 id="值">值</h2> + +<p>下面的一个或多个值，可以按任意顺序放置：</p> + +<dl> + <dt id="<attachment>"><code><attachment></code></dt> + <dd>参见 {{ cssxref("background-attachment") }}</dd> + <dt id="<box>"><code><box></code></dt> + <dd>参见 {{ cssxref("background-clip") }} 和 {{cssxref("background-origin")}}</dd> + <dt id="<background-color>"><code><background-color></code></dt> + <dd>参见 {{ cssxref("background-color") }}</dd> + <dt id="<bg-image>"><code><bg-image></code></dt> + <dd>参见 {{ Cssxref("background-image") }}</dd> + <dt id="<position>"><code><position></code></dt> + <dd>参见 {{ cssxref("background-position") }}</dd> + <dt id="<repeat-style>"><code><repeat-style></code></dt> + <dd>参见 {{ cssxref("background-repeat") }}</dd> + <dt id="<bg-size>"><code><bg-size></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"><p class="topbanner"> + Starry sky<br/> + Twinkle twinkle<br/> + Starry sky +</p> +<p class="warning">Here is a paragraph<p></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> |