版权声明：王迪 https://blog.csdn.net/dnruanjian/article/details/85290921
实现效果：让文字悬浮在图片上方
方法一：给盒子添加一个背景图片，盒子里写文字即可。
制作思路：自带背景属性的盒子，那么盒子里面的文字自然显示在图片上方。
实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html中让文字显示在图片上方-div+css方法</title>
<style type="text/css">
#da{
width:577px;/*设置盒子的宽高，可以根据作为背景的图片宽高来进行设置*/
height:400px;
background-image:url(3.jpg);/*设置盒子的背景图片*/
background-repeat:no-repeat;/*设置背景图片不重复*/
}
</style>
</head>
<body>
<div id="da">
让文字显示在图片上方
</div>
</body>
</html>
思考：如果想控制文字的显示位置，可以通过设置盒子的padding属性来实现。也可以给文字添加一个父级盒子进行设置。
注意：此方法受限于背景图片的大小，不推荐使用。
方法二：利用div+css，通过设置position属性实现。
制作思路：
1、制作一个父级盒子，用来装图片和文字。父级盒子设置相对定位。
2、分别制作两个盒子用来装图片和文字，设置两个子级盒子绝对定位。
3、父相子绝里，子元素出现重叠时，可以通过z-index属性，来控制显示层次顺序（z-index取值大的会压住取值小的元素）。
实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>html中让文字显示在图片上方-div+css方法</title>
<style type="text/css">
#da{
position:relative;/*设置父级元素，相对定位*/
}
#tu,#dh {
position:absolute;/*设置子元素绝对定位*/
}
#dh{ /*设置文字盒子的样式*/
top:10px; /*相对于父级元素，向下移10px*/
width:577px; /*设置文字盒子的宽度，这里设置其和图片宽度一致*/
height:40px;
line-height:40px;/*设置行高和高度一样，可以实现单行元素，在垂直方向上的居中*/
text-align:center;/*设置文字水平居中*/
background-color:#FFF;/*设置盒子背景颜色为白色*/
opacity:0.6;/*设置背景颜色透明度为0.6*/
}
</style>
</head>
<body>
<div id="da">
<div id="tu"><img src="3.jpg" /></div>
<div id="dh">让文字显示在图片上方</div>
</div>
</body>
</html>
扩展知识：设置背景颜色的透明度
方法一：通过backgroud和opacity设置
如： background-color:#FFF; /*设置盒子背景颜色*/
opacity:0.6; /*设置背景颜色透明度（取值从 0.0 （完全透明）到 1.0（完全不透明））*/
方法二：通过rgba方式设置
如：background:rgba(0,0,0,0.5);
RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。
注意：rgba存在兼容性问题：针对IE9以下浏览器不兼容。
===========================这里是结束分割线==================================