大佬教程收集整理的这篇文章主要介绍了Html / Css – 如何让图像展开容器的100％宽度,然后再显示另一个图像？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
这是迄今为止的html
<div id="header">
<img src="/img/headerBg.jpg" alt="" class="headerBg" />
<a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a>
<div id="loginBox">
other code
</div>
</div>
和css到目前为止
#header { height: 130px; margin: 5px 5px 0 5px; border: #0f0f12 outset 2px; border-radius: 15px; } #loginBox { float: right; width: 23.5%; height: 128px; font-size: 75%; } .headerBg { } .logo { width: 50%; height: 120px; float: left; display: block; padding: 5px; }
我想要完成的是,将“headerBg.jpg”的图像显示为div“header”的100％宽度,所以本质上它将是div本身的背景.然后将图像“logo.png”和div“loginBox”显示在“headerBg.jpg”上方.
该标志应该浮动到最左端,并且loginBox浮动到最右边,如在css中.
随着图像被删除,标志和div被正确放置,但是当引入图像时,它们将两个浮动物品放置在流动中的图像之后.
我已经尝试了各种补充和重新配置,但没有一个证明可以解决我想要的方式.
我已经将CSS中的图像作为标题div的背景添加了,但它并没有以100％的速度伸展.
有人能够提供一些洞察力吗？
还有任何涵盖这样的东西的教程将是我收藏的一个很好的补充！
谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Render this</title>
<style type="text/css">
#header {
position:relative;
height: 130px;
margin: 5px 5px 0 5px;
border: #0f0f12 outset 2px;
border-radius: 15px;
}
#loginBox {
position:relative;
float: right;
width: 23.5%;
height: 128px;
font-size: 75%;
}
.headerBg {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.logo {
position:relative;
width: 50%;
height: 120px;
float: left;
display: block;
padding: 5px;
}
</style>
</head>
<body>
<div id="header">
<img src="img/headerBg.jpg" alt="" class="headerBg" />
<a href="/"><img src="img/logo.png" alt="Logo" class="logo" /></a>
<div id="loginBox">
other code
</div>
</div>
</body>
</html>
以上是大佬教程为你收集整理的Html / Css – 如何让图像展开容器的100％宽度,然后再显示另一个图像？全部内容，希望文章能够帮你解决Html / Css – 如何让图像展开容器的100％宽度,然后再显示另一个图像？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。