文字在图片上方显示有两种方法。
一个是设定容器的background-image:url(path);
缺点：图片信息显示不完整的现象存在。原因：图片的宽高大于容器设定的宽高。需要完整显示信息需要对容器进行体行调整。
在容器div内使用img标签写入一张图片,设置图片的width=“100%” height=“100%”，注意：根据图片的宽高比例进行等比缩放。
然后再写入div 设定父容器的div的index的值为n(一般设为1)，现有容器div容器z-index为n+1。此时可在新容器在进行容器设置放入，文字图片的设置。
代码演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:400px;
height:600px;
border:1px solid pink;
position:fixed;
left:0px;
right:0px;
top:0px;
bottom:0px;
margin:auto;
}
.A{
/* height:25px;
line-height:25px; */
font-size:10px;
background-color:lightgray;
clear:both;
color:green;
margin:10px;
border:1px solid lightgray;
padding:5px;
float:left;
}
.B{
/* height:25px;
line-height:25px; */
font-size:10px;
background-color:pink;
color:black;
clear:both;
margin:10px;
border:1px solid mediumseagreen;
padding:5px;
float:right;
}
</style>
</head>
<body>
<div style="position:relative; z-index:1">
<img src="../003图片的使用/img/19.jpg" width="100%" height="100%">
<div style="position:absolute; left:0px top:0px; z-index:2">
<!--设定漂浮,显现对话的效果，注意span根据内容设定的行内元素，设定为浮动可修改font-size的默认值21px
当设置好height时，应该设置line-height等于height，目的是文字垂直居中,水平居中固定因为span容器根据文字设宽度-->
<span class="A">Good morning!</span>
<span class="B">Good morning!</span>
<span class="A">What's your name?</span>
<span class="B">Sorry to forget to introduce myself. I'm A.</span>
<span class="A">Nice to meet you, A. I'm B.</span>
<span class="B">How do you do?</span>
<span class="A">Thank you for asking, I'm fine.</span>
<span class="B">as well as you.How about going to cinema? </span>
<span class="A">You name the place and time. I'm okay.</span>
<span class="B">Okay, let's go!</span>
</div>
</div>
</body>
</html>
显示效果如下：