html - 使用 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

You will need to adjust the z-index for both the div containing the image and the text you want to posi The higher z-index will layer over the lower one.