Layout 实现这种具有多个背景的一栏CSS布局的最优雅方式

使用CSS2.1/CSS3实现以下单列布局的最简单、最优雅的方法是什么，这样它在Firefox/Chrome/Opera中看起来就完全一样了

我有一个黄色背景，由3个图像（header.png、repeating middle.png和footer.png）和一段红色文本（可变高度）组成。我希望文本部分覆盖页眉和页脚图像（如下图所示）。黄色框外的背景应该是透明的

一种解决方案是使用多个背景和填充的大屏幕：

<div style="background: url(header.png) no-repeat center top, url(footer.png) no-repeat center bottom; padding: 50px;">
    <p>A lot of text...</p>
</div>

很多文字

但是中间的背景呢？如果我用repeat-y将其添加到多个背景中，它将在header.png和footer.png的透明部分下可见

---

有什么想法吗？提前谢谢

更兼容但更粗糙的方法是使用4

s。一个

包含文本段落。（好的，这可能是一个

，随便什么。）它包含在外部三个

的中间，每个都有一部分背景。文本上的负边距（可能中间的z索引

）允许它与顶部和底部图像重叠

---

不太老套但不太兼容的方法是使用一个外部

和一个绘制背景的按钮。您仍然需要文本上的负边距才能延伸到边框的顶部和底部。

我将使用伪元素！IMO是实现类似这样的东西的最优雅的方式——而且也得到了相当好的支持

我简要介绍了我的解决方案：

您的图像没有显示，但应该可以正常工作——将重复的背景应用于div元素，将页眉和页脚图像分别应用于div:before和div:after，并使用一点z-index，一切都应该正常

---

希望对您有帮助

尝试边界图像？编辑：不。。。非挥发性物质。。。还没有在FF。。。至少这两种方法都很优雅！后者没有得到广泛支持。至于4个div，当我在带有文本的

内部设置负边距时，它会剪切标题背景，我需要使用

位置：相对
。来吧，对于这个简单的布局难道没有简单的方法吗？？这太普遍了@如果是这么简单的话，你早就解决了。