使用 css 定位图像上的文本

Question

如何在“这里”的图像上放置文字？
它必须从环绕开始 20px，固定为 250px。

HTML

<div class="background-image">
    <img src="img/picture.jpg" alt="pasta-town">
    <div id="motto" class="wrap">
        <div>some motto</div>
    </div>
</div>

CSS

#motto {
font-size: 26px;
font-family: "MetaProMedium";
position: absolute; 
top:0;
}
#motto div {
left: 755px;
width: 250px;
}
.background-image {
position: relative;
width: 100%;
}
.background-image > img {
width: 100%;
}

Answer 1

您需要调整包含图像的 div 和要定位的文本的 z-index 较高的 z-index 将覆盖较低的 z-index。