text.html

 
<p class="zw">当多个背景图重叠在一起的时候，你可能会认为它们会遵循CSS定位的重叠顺序，后面的元素层级相对越高，或者说离用户的视线相对更近，如下所示。</p> 
<pre class="代码无行号"><code>section { 
background : 
url(background.png) no-repeat 0 0, 
url(middle-ground.png) no-repeat 0 0, 
url(foreground.png) no-repeat 0 0; }</code></pre> 
<p class="zw">那你就错了，第一张图像将会呈现在最上层，并且这样有很充分的理由。如果老版本浏览器不支持多背景图定义，它会在第一个逗号前阻塞，并只显示第一张图像。</p> 
<pre class="代码无行号"><code>section { 
background : 
url(foreground.png) no-repeat 0 0, 
url(middle-ground.png) no-repeat 0 0, 
url(background.png) no-repeat 0 0; }</code></pre>