gpt4 book ai didi

Html/Css - 如何让图像拉伸(stretch)容器的 100% 宽度然后在其上显示另一个图像?

转载 作者:技术小花猫 更新时间:2023-10-29 12:33:27 25 4
gpt4 key购买 nike

我正在努力将我想到的页眉布局放在一起。

这是目前的 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 本身的背景。然后在“headerBg.jpg”上方显示图像“logo.png”和div“loginBox”。

logo 应该 float 到最左端,loginBox float 到 css 中的最右边。

移除图像后, Logo 和 div 放置正确,但是当引入图像时,它们在流中将两个 float 元素放置在图像之后。

我已经尝试了各种添加和重新配置,但没有一个被证明能达到我想要的效果。

我已将 css 中的图像作为背景添加到页眉 div,但它不会那样拉伸(stretch) 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 - 如何让图像拉伸(stretch)容器的 100% 宽度然后在其上显示另一个图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10157629/

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