Question

我正在创建一个白色的网站，所以我没有分配任何背景。但我想在网站的两个部分添加一些蓝色渐变细节。 #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;
}

有人能帮帮我吗？我已经尝试了一切......

谢谢

Answer 1

问题是你没有在包装器中包装bg_top和bg_bottom。当你这样做时它完美无缺。请找到我用过的小提琴

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

祝你好运！

Answer 2

使用position：relative，如果你想在包装器中直观地看待它，你需要将HTML放在包装器中。

Answer 3

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

 <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-index：-1; }

div与包装器后面的图像不起作用

3 个答案: