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

Posted 2023-02-21

【中文标题】css3多背景图片-定位约束混淆

【英文标题】：css3 multiple background images - positioning constraint confusion

【发布时间】：2011-11-19 17:12:40

【问题描述】：

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

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

【参考方案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。

【讨论】：

+1...什么？嗯……不错。但是如果我们有透明/不透明的 .png 图像……这可能是个问题，对吧？而且......我们不是在急于采用这种极端的 CSS3 规范，而 IE 还在我们的背后？

@roXon：是的，这会有点问题。我在this answer 中描述了一个小技巧，可以根据情况使用...

+2..... :D CSS3 变得如此强大。但是……博尔特……记住，“权力越大，责任越大” :D

@roXon：其实我也有同样的心态“不要使用 CSS3，因为它还没有完成，因为它还没有完成”，但是背景和边框模块现在已经是一个 CR，所以除非你需要迎合某些浏览器我想你可以摆脱这样的事情。

对。 $('input[type="button"]').click(function() $(Wwide_IE).remove(); );