Html 在div中填充图像_Html_Css_Layout

Html 在div中填充图像

html css layout

Html 在div中填充图像,html,css,layout,Html,Css,Layout,我想为带有div的网页创建一个基本布局，并为其背景设置图像。因为我有更小的图像，我想拉伸它们来填充div <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的网页创建一个基本布局，并为其背景设置图像。因为我有更小的图像，我想拉伸它们来填充div

    <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>

有很多方法可以做到这一点。但我尝试了以下几点：

</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>


img#bg{
排名：0；
左：0；
宽度：100%；
身高：100%；
}

这起作用了。然后我尝试在布局中使用它

    <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 width的div设置image时，它没有起作用：

  <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通知中，float:right。我将坚持使用这种方法，而不是任何jQuery方法或其他方法，我还想知道这里有什么问题，以及在我学习这一点时，应该做些什么来通过CSS修改获得所需的结果。
似乎你想要一个

<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具有背景，而不必在其中放置标记，这几乎总是比较可取的

<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>
您的示例代码可以是：

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

为了使
高度：100%，顶部：0
等正常工作，您需要将
位置应用于元素您不需要按照给出的示例代码进行操作。提供更多代码，我可以提供更多帮助。但从你所给予的来看，这是你的问题 background-size: cover; 这是一个很好的解决方案，但我不确定浏览器是否支持，因为它是CSS3 <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> 我做了一把小提琴，这就是你要找的吗？顺便说一下，将“zindex”改为“z-index” <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> 编辑：我已经用div中的文本内容更新了fiddle 任何指向您网站的链接或制作一个fiddle！这可能会对你有所帮助。我不同意背景图像几乎总是更好的假设。如果图像是内容的一部分，那么它们应该被视为内容，因此在没有CSS的文档中出现。@michaelward82背景通常不是内容的一部分，因此“几乎总是”，但不是“总是”。我收回我以前的评论-我没有注意到它是需要的背景图像。抱歉。是的，我尝试了背景图像，但无法缩放图像的全尺寸。这是CSS3中引入的背景尺寸：封面吗？现在它在IE8的x轴和y轴上引起了重复。我正在尝试将其应用于（请参阅主要问题）。@Mahesha999啊，背景大小仅在IE9+中受支持，您应该查看我在“仅CSS技术”1中的第二个链接（），了解一个好的替代方法。是的，它不在IE8中工作，导致背景重复不可缩放，我希望它在IE8中工作最新版本在IE9中的IE8模式下工作（也是在IE7模式下）。顺便说一下，背景重复是不可能的，因为它是拉伸的，我没有指定背景