<div class="container"><img src="image.jpg" alt="背景图片"><div class="h-title">这里是文字</div><div class="config-title">这里是文字2</div>
</div>

方法一：使用绝对定位

CSS代码

 .container {position: relative;/相对定位/top: 0;left: 0;}.h-title {position: absolute;/绝对定位/top: 85px;left: 20px;font-size: 16px;font-weight: 700;}.config-title {position: absolute;/绝对定位/top: 125px;left: 20px;font-size: 10px;font-weight: 400;border: 1px solid #fff;border-radius: 4px;padding: 2px 8px 3px 8px;text-align: center;cursor: pointer;}

方法二：引入背景图片(background-image: url(path))

在引入背景图片的时候，我们需要注意背景图片的大小，如果和div大小不同，则我们需要调整background-size属性使图片适配div大小。代码如下：

<div class="container"><div class="imgbox box1">这是文字</div>
</div>

<style>.container .imgbox{height: 216px;width: 384px;}.container .box1 {font-size: 20px;color: ivory;background-image: url(../static/images/redLeafage.jpg);background-size: 384px 216px;background-repeat: no-repeat;text-align: right;}
</style>