mozilla

Revision 433951 of 使用CSS的多背景

  • Revision slug: Web/Guide/CSS/Using_multiple_backgrounds
  • Revision title: 使用CSS的多背景
  • Revision id: 433951
  • Created:
  • Creator: Nightingale
  • Is current revision? No
  • Comment

Revision Content

通过使用 CSS3,你可以向元素应用多个背景。这些背景相互堆叠,第一个背景放在最上面,最后一个背景放在最下面。 仅最后一个背景允许拥有背景色。

指定多个背景很简单:

.myclass {
  background: background1, background 2, ..., backgroundN;
}

你既可以使用简写属性 {{ cssxref("background") }} 也可以使用除 {{ cssxref("background-color") }} 外的独立属性。即,,下面的属性可以用属性列表指定, 每个背景一个: {{ cssxref("background") }},{{ cssxref("background-attachment") }},{{ cssxref("background-clip") }}, {{ cssxref("background-image") }},{{ cssxref("background-origin") }},{{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}。

示例

该例中,三个背景进行堆叠:火狐标志,一个线性渐变, 和一张带有花的图片:

.multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
        linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
        url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}
结果
css_multibg.png

如你所见,火狐标志(列表第一项)在最上面,紧接着是放在图片上面的线性渐变。每个子属性 ({{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}) 应用于对应的背景。因此属性 {{ cssxref("background-repeat") }} 的第一个值应用于第一个(最前面)的背景,依次可推。

其它

 

Revision Source

<p><span class="seoSummary">通过使用 <a href="/en/CSS/CSS3" title="CSS3">CSS3</a>,你可以向元素应用<strong>多个背景</strong>。这些背景相互堆叠,第一个背景放在最上面,最后一个背景放在最下面。</span> 仅最后一个背景允许拥有背景色。</p>
<p>指定多个背景很简单:</p>
<pre class="brush: css">
.myclass {
&nbsp; background: background1, background 2, ..., backgroundN;
}
</pre>
<p>你既可以使用简写属性 {{ cssxref("background") }} 也可以使用除 {{ cssxref("background-color") }} 外的独立属性。即,,下面的属性可以用属性列表指定, 每个背景一个: {{ cssxref("background") }},{{ cssxref("background-attachment") }},{{ cssxref("background-clip") }},<code> </code>{{ cssxref("background-image") }},{{ cssxref("background-origin") }},{{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}。</p>
<h2 id="Example">示例</h2>
<p>该例中,三个背景进行堆叠:火狐标志,一个<a href="/en/CSS/linear-gradient" title="en/CSS/-moz-linear-gradient">线性渐变</a>, 和一张带有花的图片:</p>
<pre class="brush: css">
.multi_bg_example {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}
</pre>
<table class="standard-table">
  <tbody>
    <tr>
      <td class="header">结果</td>
    </tr>
    <tr>
      <td style="padding:0;"><img alt="css_multibg.png" class="internal default" src="/@api/deki/files/4028/=css_multibg.png" style="display:block;" /></td>
    </tr>
  </tbody>
</table>
<p>如你所见,火狐标志(列表第一项)在最上面,紧接着是放在图片上面的线性渐变。每个子属性 ({{ cssxref("background-repeat") }} 和 {{ cssxref("background-position") }}) 应用于对应的背景。因此属性 {{ cssxref("background-repeat") }} 的第一个值应用于第一个(最前面)的背景,依次可推。</p>
<h2 id="See_also">其它</h2>
<ul>
  <li>{{ CSS_Reference:Background() }}</li>
  <li><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en/Using gradients">使用CSS渐变</a></li>
</ul>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
Revert to this revision