0

我正在创建一个白色的网站，所以我没有分配任何背景。但我想在网站的两个部分添加一些蓝色渐变细节。#bg_top 将放置在左侧的顶部，而#bg_bottom 应放置在右侧的底部。当然，这并不完全按照我想要的方式工作......

这是它在我的 html 上的显示方式：

<body>

<div id="bg_top"></div>

<div id="wrapper">
</div>

<div id="bg_bottom">
</div>

<footer>
</footer>

#bg_top 完美运行。它确实显示在包装器后面，但 bg_bottom 给我带来了问题，因为它放置得很好，但它在包装器和页脚之间视觉上。因此我使用了 z-index 但它也不起作用。另外奇怪的是底部和左侧参数没有任何区别。这是CSS代码：

#wrapper{
    width: 925px;
    height: 1355px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

#bg_top{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url('../_img/2_body/bg/bg_top.jpg');
    z-index: -1;
}

#bg_bottom{

    width: 500px;
    height: 500px;
    position: relative;
    float: right;
    bottom: 0px;
    right: 0px;
    background-image: url('../_img/2_body/bg/bg_under.jpg');
    z-index: -1;
}

有人可以帮我吗？我什么都试过了...

谢谢你

4

3 回答 3

0

使用 position: relative，如果您希望它在包装器中直观地显示，则需要将 HTML 放在包装器中。

于 2012-05-15T16:57:50.187 回答
0

我已经得到了答案……我需要将图片放在包装纸后面。底部图片贴在页脚的右上角，顶部图片与页眉处于同一级别。感谢输入，我看到它非常简单......

 <body>

<header>

<div id="bg_top"></div>

</header>


<div id="wrapper"></div>


<footer>
<div id="bg_bottom"></div>
</footer>

</body>

因此，在我应用绝对位置和 z-index 和图片作为背景完成之后......在包装器后面并在它的位置。这是最终的 CSS 代码：

#bg_top{
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0px;
    left: 0px;
    background-image: url('../_img/2_body/bg/bg_top.jpg');
    z-index: -1;
}



#bg_bottom{

    width: 500px;
    height: 500px;
    position: absolute;
    background-image: url('../_img/2_body/bg/bg_under.jpg');
    bottom: 155px;

任何其他疑问也许我可以提供帮助......对：0px; z 指数：-1；}

于 2012-05-16T08:07:39.317 回答
0

问题是您没有将 bg_top 和 bg_bottom 包装在包装器内。当你这样做时它会完美运行。请找到我使用的小提琴

http://jsfiddle.net/meetravi/sL5jm/

祝你好运 ！

于 2012-05-15T15:19:05.077 回答