私は白いウェブサイトを作成しているので、私はしません背景を割り当てます。しかし、ウェブサイトの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;
}
誰かが私を助けてもらえますか？私はすべてを試しました...
ありがとうございました
回答：
回答№1は0問題は、bg_topとbg_bottomをラッパー内でラップしていないことです。あなたがそれをするときそれは完全に働きます。私が使ったフィドルを見つけてください
http://jsfiddle.net/meetravi/sL5jm/
がんばろう ！
回答№2の場合は0
position：relativeを使用して、ラッパー内に視覚的に配置する場合は、HTMLをラッパー内に配置する必要があります。
回答№3の場合は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; }