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>

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

1 个答案: