我想用div创建网页的基本布局,并希望为其背景设置图像。 由于我有较小的图像,我想拉伸它们来填充div。
有很多方法可以做到这一点。但我试着跟随:
</html>
<head>
<style>
img#bg {
top:0;
left:0;
width:100%;
height:100%;
}
<style>
<head>
<body>
<img src="body.jpg" alt="background image" id="bg" />
<div id="content"> </div>
<body>
</html>
这很有用。然后我尝试在布局中使用它。
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
这也有效。但是,当我尝试以这种方式为浮点数设置图像:左边或CSS宽度设置时,它不起作用:
<div id="header" style="zindex=1;height:300px;width:100%"></div>
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" style="float:right" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
这不起作用。在最后的HTML通知浮动:右。 我想坚持使用这种方法,而不是任何jQuery方法或其他方法,并且还想知道这里有什么问题,以及如何通过 CSS修改来获得所需的结果,因为我正在学习这个
答案 0 :(得分:2)
好像你想要一个background image
可以找到一个很好的解释here
基本上你可以使用CSS制作一个div有背景而不必在里面放一个标签,这几乎总是可取的。
您可以使用以下示例代码:
body {
background-image: url('body.jpg');
background-size: cover;
}
答案 1 :(得分:0)
要使height: 100%, Top:0
等工作,您需要将position
应用于该元素。
您没有按照给出的示例代码。提供更多代码,我可以提供更多帮助。但是从你给出的这个是你的问题。
答案 2 :(得分:0)
background-size: cover;
是一个不错的解决方案,但我不确定浏览器支持,因为它是CSS3。
我做了一个小提琴,这是你在找什么? http://jsfiddle.net/NQY6B/5/
顺便说一句,将“zindex”改为“z-index”。
编辑:我已经更新了div中文本内容的小提琴