gpt4 book ai didi

html - 在div中填充图像

转载 作者:太空宇宙 更新时间:2023-11-04 04:48:35 25 4
gpt4 key购买 nike

我想为带有 div 的网页创建一个基本布局,并想为其背景设置图像。因为我有较小的图像,所以我想拉伸(stretch)它们以填充 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 中,请注意 float:right。我想坚持使用这种方法,而不是任何 jQuery 方法或其他方法,并且还想知道这里出了什么问题,以及在我学习此方法时应该如何通过 CSS 修改 获得所需的结果.

最佳答案

看起来你想要一个 background image

可以找到很好的解释here

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

您的示例代码可以是:

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

关于html - 在div中填充图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13931636/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com