0

私は白いウェブサイトを作成しているので、背景を割り当てていません。しかし、ウェブサイトの2つの部分に青いグラデーションの詳細を追加したいと思います。#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

問題は、bg_topとbg_bottomをラッパー内にラップしていないことです。あなたがそれをするときそれは完全に働きます。私が使ったフィドルを見つけてください

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

幸運を ！

于 2012-05-15T15:19:05.077 に答える
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-index：-1; }

于 2012-05-16T08:07:39.317 に答える