1

cssレイアウトを作成しようとしているEndles 

<div id="act"><img src="img/home01.jpg"></div>    
<div id="buttons></div>

img"home01"が画面に収まるはずです。モニターのサイズやimgの元のサイズに関係なく、スクロール、空白、オーバーフローはありません。

divボタンは、クリックできるようにする必要があります。つまり、img "home01"（より高いz-index）の前、および画面の中央に配置されたhor＆verです。
助けてください。

4

4 に答える 4

5

まず、スタイルを div id="act" に設定して、次のように画面全体をカバーする必要があります

#act{
    position:absolute;
    left:0; top:0; right:0; bottom:0;
    height:100%; width:100%;
}

これで、div 内に画像があるので、その画像にスタイルを次のように設定します

img { min-width:100%;min-height:100%; }
于 2012-07-20T11:43:38.373 に答える
3 
<div id="act">
    <div id="buttons">
        <button>test1</button>
        <button>test2</button> 
        <button>test3</button> 
    </div>
    <div id="content"></div>
</div>



#act {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url( "http://hdwallpaperpics.com/wallpaper/picture/image/Opera-Background-Blue-Swirls.jpg" );
}
#buttons {
    position: absolute;
}
于 2012-07-20T11:44:46.737 に答える
2

ここに作業フィドルがあります：http://jsfiddle.net/surendraVsingh/ZpvsC/

HTML

<div id="act"><img src="http://images.travelpod.com/tripwow/photos/ta-00ad-668e-a3e6/night-gondeliers-venice-italy%2B1152_12878015263-tpfil02aw-3646.jpg"></div>    
<div id="buttons">
     <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
    </ul>
</div>​

CSS

#act img{width:100%; overflow:hidden; position:relative;}
#buttons{position:absolute; z-index:999; top:20px; right:5%; color:#fff; display:block;}
#buttons li{display:inline-block; margin:0 5px 0 0;}

</p>

于 2012-07-20T11:52:59.680 に答える
2

width:100% を試しましたか? img が背景画像 (タイル化可能) の場合は、background を使用します: url('img/home01.jpg') repeat-x ボタンは画像の上にあるべきですか? 次に、html を少し変更する必要があります。それらを最初の div 内に配置します。本当に必要な場合は、img タグを閉じます。

フィドル

于 2012-07-20T11:38:47.447 に答える