这是迄今为止的HTML
<div ID="header"> <img src="/img/headerBg.jpg" alt="" /> <a href="/"><img src="/img/logo.png" alt="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="" /> <a href="/"><img src="img/logo.png" alt="logo" /></a> <div ID="loginBox"> other code </div></div></body></HTML> 总结 以上是内存溢出为你收集整理的Html / Css – 如何让图像展开容器的100％宽度,然后再显示另一个图像？全部内容，希望文章能够帮你解决Html / Css – 如何让图像展开容器的100％宽度,然后再显示另一个图像？所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）