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。

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

1 个答案: