用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。