<分区>
html - 如何在图像顶部添加一个 h1，在中间添加一个段落并使图像变暗？
目前正在努力将一些文本放在图像上并使图像更暗一些。
然而，我的尝试似乎并不奏效。我无法让图像变暗，文本要么在图像上方，要么在图像下方，但没有像我尝试的那样位于顶部。
红色方 block = 图片，黑色方 block 将放置 H1(透明)。
HTML:
<div id="mainarticle">
<a href="artikels.html">
<img src="images/interview.jpg">
<div id="ontop">
<h3> Lol </h3>
</div>
</a>
</div>
CSS:
#ontop {
height: 70px;
width: 100%;
background-color: rgba(0,0,0,0.4);
}
#mainarticle img {
height: 100vh;
width: 100%;
}
最佳答案
您可以对文本使用 position: absolute:
#ontop {
position:absolute;
top:0;
left:0;
和带有黑色背景的附加 div(类“darker”) 参见示例:
关于html - 如何在图像顶部添加一个 h1，在中间添加一个段落并使图像变暗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52954794/