<div class="col-lg-7"> <img src="images/aaa.gif" alt="your_image_description" width="70%" height="70%"> <h3 class="mb-4">基本信息</h3> <br><br> <div class="col-sm-6 py-2"><h6>姓名: <span class="text-secondary">张雅维</span></h6></div> <div class="col-sm-6 py-2"><h6>出生日期: <span class="text-secondary">2003.3.15</span></h6></div> <div class="col-sm-6 py-2"><h6>性别: <span class="text-secondary">女</span></h6></div> <div class="col-sm-6 py-2"><h6>年龄: <span class="text-secondary">20</span></h6></div> <div class="col-sm-6 py-2"><h6>手机号码: <span class="text-secondary">12222222222</span></h6></div> <div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">2825275860@qq.com</span></h6></div> <div class="col-sm-6 py-2"><h6>学历: <span class="text-secondary">本科</span></h6></div> <div class="col-sm-6 py-2"><h6>学校: <span class="text-secondary">宁夏医科大学</span></h6></div> </div>将文字放在图片上方
时间: 2023-08-13 18:36:03 浏览: 93
您可以使用CSS中的position属性将文字放在图片上方。具体操作如下:
1. 首先,您需要将图片和文字都放在一个父容器中,例如一个div元素。
2. 然后,将图片的position属性设置为relative,以便在父容器中定位。
3. 接着,将文字的position属性设置为absolute,以便相对于父容器进行定位。
4. 最后,使用top和left属性对文字进行微调,使其位于图片的上方。
以下是示例代码:
```
<div class="parent-container">
<img src="images/aaa.gif" alt="your_image_description" width="70%" height="70%">
<h3 class="mb-4">基本信息</h3>
<div class="text-container">
<div class="col-sm-6 py-2"><h6>姓名: <span class="text-secondary">张雅维</span></h6></div>
<div class="col-sm-6 py-2"><h6>出生日期: <span class="text-secondary">2003.3.15</span></h6></div>
<div class="col-sm-6 py-2"><h6>性别: <span class="text-secondary">女</span></h6></div>
<div class="col-sm-6 py-2"><h6>年龄: <span class="text-secondary">20</span></h6></div>
<div class="col-sm-6 py-2"><h6>手机号码: <span class="text-secondary">12222222222</span></h6></div>
<div class="col-sm-6 py-2"><h6>Email: <span class="text-secondary">2825275860@qq.com</span></h6></div>
<div class="col-sm-6 py-2"><h6>学历: <span class="text-secondary">本科</span></h6></div>
<div class="col-sm-6 py-2"><h6>学校: <span class="text-secondary">宁夏医科大学</span></h6></div>
</div>
</div>
<style>
.parent-container {
position: relative;
}
img {
position: relative;
}
.text-container {
position: absolute;
top: 0;
left: 0;
}
</style>
```
您可以根据需要进行微调,以使文字和图片的布局更加美观。
阅读全文