1

Endles 试图创建一个 CSS 布局 

<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

你试过宽度：100% 吗？如果 img 是背景图片（可平铺），请使用 background: url('img/home01.jpg') repeat-x 按钮应该在图片上方？那么你应该稍微改变你的html。将它们放在第一个 div 中。关闭 img 标签，如果你真的需要它。

小提琴

于 2012-07-20T11:38:47.447 回答
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 回答