首页 文章

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

提问于
浏览 次
0

所以我有这个网页设计，我正在尝试用CSS组合，我在div的CSS布局上苦苦挣扎 .

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

当涉及到DIV时，我正在思考这个问题：

  • 包装（主背景）

  • 阴影（主背景上的图层）

  • Headers

  • 居中的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现在可以工作了！ :)

html css

1 回答

  • 3

    这样的事可能吗？

    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>
    回复于

相关问题