Question

我想用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修改来获得所需的结果，因为我正在学习这个

Answer 1

好像你想要一个background image

可以找到一个很好的解释here

基本上你可以使用CSS制作一个div有背景而不必在里面放一个标签，这几乎总是可取的。

您可以使用以下示例代码：

body {
   background-image: url('body.jpg');
   background-size: cover;
}

Answer 2

要使height: 100%, Top:0等工作，您需要将position应用于该元素。

您没有按照给出的示例代码。提供更多代码，我可以提供更多帮助。但是从你给出的这个是你的问题。

Answer 3

background-size: cover;

是一个不错的解决方案，但我不确定浏览器支持，因为它是CSS3。

我做了一个小提琴，这是你在找什么？ http://jsfiddle.net/NQY6B/5/

顺便说一句，将“zindex”改为“z-index”。

编辑：我已经更新了div中文本内容的小提琴

在div中填充图像

3 个答案: