Html 向图像横幅添加文本

我知道这个问题在这里被问了很多次，但对我来说什么都不管用。我正在为我的一个Codecademy练习做我的第一个独立的头版，我还不是真的精通编码。也许我遗漏了什么，所以我会把代码贴在这里

body，html{
左边距：0.5%；
右边距：0.5%；
利润底部：0.5%；
利润率最高：2%；
}
img{
宽度：100%；
高度：120px；
对象匹配：覆盖；
位置：相对位置；
}
氢{
字体系列：Helvetica，无衬线；
字体大小：100px；
字体大小：粗体；
颜色：卡其色；
位置：绝对位置；
}

达斯莫托的工艺美术
达斯莫托的工艺美术

通过将绝对位置和z索引设置为更高的值，可以将文本插入到图像中。因此，您可以在图像上方显示文本

也可以在文本容器中将图像设置为背景

<div style='background-image: url("imageUrl");'>
   <h2>Dasmoto's Arts & Crafts</h2>
</div>

达斯莫托的工艺美术

达斯莫托的工艺美术
达斯莫托的工艺美术
达斯莫托的工艺美术

您可以将图像设置为banner类的背景：

达斯莫托的工艺美术
身体
html{
左边距：0.5%；
右边距：0.5%；
利润底部：0.5%；
利润率最高：2%；
}
.横幅{
背景图片：url(https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-2/pattern.jpeg);
对象匹配：覆盖；
位置：相对位置；
高度：120px；
}
氢{
字体系列：Helvetica，无衬线；
字体大小：50px；
字体大小：粗体；
颜色：卡其色；
位置：绝对位置；
}
达斯莫托的工艺美术

请您描述一下这个问题。你想得到什么？你必须定义top:0px；或者CSS中h2中的特定点。这看起来是最好的选择，因为您避免了将文本放置在图像上方的不必要属性，如

position:absolute

，

z-index

…当我添加“top”时，它起到了作用元素，但我必须给它一个负值，以便将其定位在横幅的中心。“left”元素也有助于文本重新居中。我不确定这是否是一种有效的方法，但它起了作用，所以谢谢：）