css3多背景图片-定位约束混淆

Question

在 CSS 中，我们一直能够利用块模型的思想为边框、圆角等创建整个“顶部-中间（平铺）-底部”效果。例如..

#top { background-image: url('some-top-image.jpeg'); }
#middle { background-image: url('some-middle-image-that-tiles.jpeg') repeat-y; }
#bottom { background-image: url('some-bottom-image.jpeg'); }

<div id="top"></div>
<div id="middle"><!-- tons of content here --></div>
<div id="bottom"></div>

不是完全有效的代码，但无论如何它说明了这个概念。

我想知道是否有办法将这种逻辑封装到 CSS3 以单一样式处理多个背景图像的新能力中。这样..

.content {
   background: 
           // top image - top positioning
           // middle image - tiling, offset from top
           // bottom image - bottom positioning
}
<div class="content"><!-- Lots of Content --></div>

我试图只输入估计值，但它似乎不像我预期的那样出现。我想知道是否有更多经验的人可以告诉我这是否可以做到，以及是否有任何已知的例子。

Answer 1

指定顶部和底部图像及其位置，然后是中间的：

.content {
    background: url('some-top-image.jpeg') top no-repeat, 
                url('some-bottom-image.jpeg') bottom no-repeat, 
                url('some-middle-image-that-tiles.jpeg') repeat-y;
}

中间的平铺图像是最后声明的，这样顶部和底部的图像就会叠加在它上面。多个背景图像的分层是从上到下完成的。有关更多信息，请参阅背景和边框模块的 §3.1 Layering multiple background images。