CSS - 这种布局策略的提示？三个背景层

Question

所以我得到了这个网页设计，我正在尝试将其与 CSS 放在一起，但我在 div 的 CSS 布局上有些吃力。

问题是，我想要一个主要背景。然后在其上添加一层半透明的 png 图像来模拟阴影。最重要的是，我想要另一个半透明的 png 图像，只是居中。然后是页眉和页脚。

当谈到 DIV 时，我在想一些事情：

• 包装器（主要背景）
  • 阴影（主背景顶部的图层）
    • 标题
    • 居中的 png 作为背景
      • 主要内容
• 页脚

我真正想知道的是，你们将如何实现这一目标？ 您将如何定位每个元素？

如果不是不可能的话，我想以此示例为起点。 http://ryanfait.com/sticky-footer/

这是我目前的 CSS 代码（抱歉，无法使用代码块）

html，正文 { 边距：0； 填充：0； 高度：100%； } #包装器{ 背景图像：url（img/Full/BrownPattern.jpg）； 背景重复：重复； 高度：100%； 最小高度：100%； 填充底部：30px； } ＃阴影 { 背景图像：url（img/Full/BGShadow.png）； 背景重复：重复-x； 高度：100%； 最小高度：100%； 填充底部：30px； } #标题{ 高度：58px； 背景图像：url（img/Full/TopLine.png）； 背景重复：重复-x； } #contentBg { 背景图像：url（img/Full/Fridge.png）； 背景重复：不重复； 背景位置：中心； 高度：100%； 最小高度：100%； } #页脚{ 高度：100px； 背景颜色：#666666; }

刚刚更新了代码。在发布更新之前会尝试解决它。 好的，CSS 现在可以工作了！ :)

Answer 1

可能是这样的吗？

CSS：

#wrapper {
    background: url('bg.png') repeat-x top; /* here I choose to repeat-x */
}
#shadow {
    background: url('shadow.png') repeat-x top;
}
#header {
    height: 100px;
}
#contentBg {
    background: url('contentbg.png') no-repeat top center;
}

HTML：

<div id="wrapper">
    <div id="shadow">
        <div id="header"></div>
        <div id="contentBg">
            <div id="content"></div>
        </div>
    </div>
</div>
<div id="footer"></div>