0

我想为带有 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>

这也奏效了。但是，当我尝试以这种方式为设置了 float:left 或 CSS 宽度的 div 设置图像时，它不起作用：

  <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 修改获得所需的结果。

4

3 回答 3

2

好像你想要一个背景图片

一个很好的解释可以在这里找到

基本上，您可以使用 CSS 使 div 具有背景，而不必在其中放置标签，这几乎总是可取的。

您的示例代码可能是：

body {
   background-image: url('body.jpg');
   background-size: cover;
}
于 2012-12-18T11:15:36.713 回答
0

为了使height: 100%, Top:0etc 工作，您需要将 aposition应用于元素。

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

于 2012-12-18T11:15:48.703 回答
0 
background-size: cover;

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

我做了一个小提琴，这就是你要找的吗？ http://jsfiddle.net/NQY6B/5/

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

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

于 2012-12-18T11:31:13.427 回答