html
<div class="container">
<img src="image.jpg" alt="背景图片">
<div class="h-title">这里是文字</div>
<div class="config-title">这里是文字2</div>
</div>
方法一:使用绝对定位
CSS代码
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大小。代码如下:
html
<div class="container">
<div class="imgbox box1">这是文字</div>
</div>
css
<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>