<!DOCTYPE html>
<html>
<head>
<title>将文字浮在图片上</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
</head>
<!–
图片资源是在百度图片中找的，如果显示不出来，就换个链接
–>
<body>
<!–
方法一：将图片设置为div的背景图片
不推荐：通常不能顺利显示整个图片，而且图片大小不能控制，文字太少了图片只能显示一部分，文字大多，会出现一大片的空白（如果是no-repeat）,哪能那么巧就匹配呢…
–>
<span style=”font-family:Microsoft YaHei;”>
<div style=”background:url(‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541495469148&di=f22114fa07e3b8e35564aaebe133064b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6037cb445933312b31bb151edda.jpg’) no-repeat;width:100%;height:100%;”>添加文字…添加文字…添加文字…</div>
</span>
<br>
<!–
方法二：将图片和文字放在一个样式为“position: relative;”的div中，因为“position: absolute;”的元素会根据它父元素中最近的含有“position: relative;”的元素做定位
–>
<span style=”font-family:Microsoft YaHei;font-size:18px;”>
<div style=”position: relative; width: 500px; height: 200px;”>
<img src=”https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541495469148&di=f22114fa07e3b8e35564aaebe133064b&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8b82b9014a90f6037cb445933312b31bb151edda.jpg” style=”width:100%; height:100%;” alt=””>
<span style=”position: absolute; top: 0; left: 0;”>添加文字…添加文字…添加文字…</span>
</div>
</span>
</body>
</html>
