gpt4 book ai didi

html -

叠加图像

转载 作者:太空宇宙 更新时间:2023-11-04 09:00:37 28 4
gpt4 key购买 nike

我想弄清楚如何将 h1 放在图片的顶部。我已经尝试了在 stackoverflow 上找到的多种方法,但我仍然无法理解它。

HTML:

<div class="container">
<div class="mainImg">
<h1> Title </h1>
<img src="img" alt="picture" />
</div>
</div>

CSS:

    .mainImg {
position: relative;
left: 0;
top: 0;
background: green;
}

.mainImg h1 {
z-index: 2;
position: absolute;
top: 30%;
left: 0;
right: 0;
font-size: 20px;
width: 100%;
height: 26px;
padding: 0;
margin: 0;
text-align: center;
background: red;
}

.mainImg img {
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
background:green
}

最佳答案

如果你的容器(mainIMG)除了那些绝对定位的元素之外没有其他内容,你必须为它设置一个宽度和高度。通过绝对定位,两个子元素都在容器的内容流之外。该图像只有百分比宽度和高度值,加上取决于其容器的位置值,因此没有容器的宽度和高度它不占用空间:

.mainImg {
position: relative;
left: 0;
top: 0;
background: green;
width: 300px;
height: 200px;
}

.mainImg h1 {
z-index: 2;
position: absolute;
top: 30%;
left: 0;
right: 0;
font-size: 20px;
width: 100%;
height: 26px;
padding: 0;
margin: 0;
text-align: center;
background: red;
}

.mainImg img {
z-index: 0;
width: 100%;
height: 100%;
position: absolute;
top:0;
right:0;
bottom:0;
left:0;
background:green
}
<div class="container">
<div class="mainImg">
<h1> Title </h1>
<img src="http://placehold.it/400x300/0fb" alt="picture" />
</div>
</div>

关于html - <h1> 叠加图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42791824/

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