いくつかの背景色で作成している Web サイトがあります。画像を使用してこれを行うことができることはわかっていますが、レスポンシブ サイトを作成しているため、画像を使用したくありません。
サンプルでは、青、赤、緑の色が最初に表示されていることがわかります。しかし、表示をクリックすると、切り替え時にオレンジ色のレイヤーの後ろに消えます。
質問は、
#wraps が切り替えられたときに、CSS を使用して #wrap2 div 内で背景を相対的に保つにはどうすればよいですか?
IE8以降で動作するにはこれが必要です。
CSSは次のとおりです。
body {margin:0;padding:0;background:#ccc;}
#wrap1{width:100%;height:200px;postion:absolute;background:orange;display:none;}
#wrap2{width:100%;height:200px;postion:absolute;}
#bg1{width:100%;height:50px;background:#0099cc;position:absolute;z-index:-1;top:50px}
#bg2{width:100%;height:50px;background:#990000;position:absolute;z-index:-1;top:100px}
#bg3{width:100%;height:50px;background:#99cc00;position:absolute;z-index:-1;top:150px;}
#logo{width:25%;height:100px;background:yellow;margin:2%;float:left;}
コードは次のとおりです。
<div id="wrap1">hello one</div>
<div id="wrap2">hello two<button id="showcontact">show</button>
<div id="bg1">hi div1</div>
<div id="bg2">hi div2</div>
<div id="bg3">hi div3</div>
<div id="logo">logo</div>
</div>
jQuery は次のとおりです。
$("#showcontact").click(function () {
$("#wrap1").toggle();
});
ありがとう