html - CSS - 此布局策略的提示？三个背景层

Question

所以我得到了这个网页设计，我试图将它与 CSS 放在一起，但我在 div 的 CSS 布局上遇到了一些困难。

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

当涉及到 DIV 时，我的想法大致是这样的:

• 包装器(主要背景)
  • 阴影(主背景之上的图层)
    • 标题
    • 居中 png 作为背景
      • 主要内容
• 页脚

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

我想用这个例子作为起点，如果这不是不可能的话…… http://ryanfait.com/sticky-footer/

到目前为止，这是我的 CSS 代码(抱歉，无法使用代码块)

html, body {    margin:0;    padding:0;    height:100%;}#wrapper {    background-image:url(img/Full/BrownPattern.jpg);    background-repeat:repeat;    height:100%;    min-height:100%;    padding-bottom:30px;}#shadow {    background-image:url(img/Full/BGShadow.png);    background-repeat:repeat-x;    height:100%;    min-height:100%;    padding-bottom:30px;}#header {    height: 58px;    background-image:url(img/Full/TopLine.png);    background-repeat:repeat-x;}#contentBg {    background-image:url(img/Full/Fridge.png);    background-repeat:no-repeat;    background-position:center;    height:100%;    min-height:100%;}#footer{    Height:100px;    background-color:#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>