<p class="zw">对于在一个区域里包含一个标题和一段文章的设计，我们会使用背景图像来实现。在过去，我们需要创建两个嵌套的元素，并分别定义不同的背景来实现。</p> <pre class="代码无行号"><code><div class="left"> <div class="right"> […] </div> </div></code></pre> <p class="zw">幸运的是，现在我们只需要使用一个HTML元素<code>section</code>，给它定义两个背景图像就能实现这种效果。</p> <pre class="代码无行号"><code><section> […] </section></code></pre> <p class="zw">我已经为这个设计做了两个背景图像，一个定位到左边，另一个定位到右边。我们可以为这两个背景图像的指定相同的<code>background-image</code>值，只需要用逗号分隔开每个图像的路径。</p> <pre class="代码无行号"><code>section { background-image : url(section-left.png), url(section-right.png); }</code></pre> <p class="zw">与此同时，我们也应该指定背景图像的位置和平铺方式，同样用逗号来分隔开它们。</p> <pre class="代码无行号"><code>section { background-position : 0 0, 100% 0; background-repeat : no-repeat, no-repeat; }</code></pre> <p class="zw">为了节省几个字节，我们也可以用样式缩写的方式，把图像路径、平铺方式和位置写在一起。</p> <pre class="代码无行号"><code>section { background : url(section-left.png) no-repeat 0 0, url(section-right.png) no-repeat 100% 0; }</code></pre>
