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

在CSS中，我们一直能够利用块模型的思想为边界，圆角等物体创建整个“顶部 - 中间（瓦）底部”效果。。例如..css3多重背景图像 - 定位约束混淆

#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>

我试图只需键入的估计值，但它似乎不出来像我期望的那样。我想知道是否有更多经验的人可以启发我是否可以做到这一点，以及是否有任何已知的例子。

来源

2011-09-18 Ciel

指定的顶部和底部的图像和它们的位置，那么中间的一个：

.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。

来源

2011-09-18 15:26:18 BoltClock

+1 ...什么？哼哼......很好。但是，如果我们有透明/不透明的PNG图像......这可能是一个问题，对吧？而且......我们是不是赶着这个极端的CSS3规范让IE仍然在我们的后面呢？ –

@roXon：是的，那会有点问题。有一个小技巧，我在[这个答案]中描述（http://stackoverflow.com/questions/5427371/css3-multiple-background-images-and-a-background-color/5427455#5427455），可以使用取决于情况... – BoltClock

+2 .....：D CSS3变得如此强大。但是...... Bolt ......请记住，*“拥有强大的力量才会带来巨大的责任”*：D –

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

回答

相关问题