实现这种具有多个背景的单列 CSS 布局的最优雅方式答案

【问题标题】：Most elegant way to achieve this one-column CSS layout with multiple backgrounds实现这种具有多个背景的单列 CSS 布局的最优雅方式
【发布时间】：2011-11-17 08:27:40
【问题描述】：

使用 CSS2.1/CSS3 实现以下单列布局的最简单和优雅的方法是什么，因此在 Firefox/Chrome/Opera 中看起来相同？

我有一个黄色背景，由 3 个图像（header.png、重复的 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的透明部分下可见。

有什么想法吗？提前致谢！

【问题讨论】：

尝试过边框图片？编辑：不... nvm...不在FF中...至少

标签： layout css background

【解决方案1】：

我会使用伪元素！ IMO 是实现此类功能的最优雅的方式——并且也得到了很好的支持

我做了一个快速的 jsfiddle 概述了我的解决方案：

http://jsfiddle.net/vfdFR/6/

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

希望对你有帮助

【讨论】：

【解决方案2】：

更兼容但更hacky的方法是使用4个<div>s。一个<div> 包含文本段落。（好的，所以这可能是一个<p>，无论如何。）它包含在外部三个<div>s 的中间，每个<div>s 都有一部分背景。文本上的负边距（可能还有中间的 z-index <div>）然后允许它与顶部和底部图像重叠。

不那么老套但兼容性较差的方法是使用一个外部<div> 和一个绘制背景的border-image。您仍然需要文本上的负边距才能延伸到边框的顶部和底部。

【讨论】：

这两种方法都不优雅！后者没有得到广泛支持。至于 4 个 div，当我在内部 <div> 上设置负边距顶部时，它会削减我的标题背景，我需要使用 position: relative。来吧，这种简单的布局没有简单的方法吗？太常见了！
@niutech 如果就这么简单，那你早就解决了。