第一种方法、添加一个DIV，采用绝对定位，图片所属DIV为基准。
参考代码如下：
1
2
3
4
5
6
<div style="position:relativewidth:100pxheight:100px">
<img src="" alt="" />
<div style="position:absolutewidth:100pxheight:100pxz-indent:2left:0top:0">
文字
</div>
</div>
第二种方法、图片作为背景图片。
参考代码如下：
1
2
3
<div style="background:url(abc.jpg) no-repeat left top">
文字
</div>
文字在图片上显示
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
#abox{
position:relative/*容器相对定位*/
width:300px/*宽度300px*/
margin:0 auto/*横向居中*/
}
#abox img{
width:300px/*宽度300px*/
}
span{
position:absolute/*文字容器绝对定位*/
display:block/*span转为块元素*/
width:100%/*宽度相对于父容器100%*/
text-align:center/*文字居中*/
top:0/*距离父容器顶部0*/
left:0/*距离父容器左侧0*/
color:red/*文字颜色红色*/
font-size:18px/*文字大小既文字高度18px*/
font-weight:bold/*文字加粗*/
}
</style>
</head>
<body>
<div id="abox"><!--容器，相对定位-->
<img src="123.jpg"><!--图片-->
<span>我要显示文字</span><!--文字，绝对定位-->
</div>
</body>
</html>
可以。
以html为例，步骤：
一、在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字。
二、在CSS中对文字图片进行简单样式添加，效果如图所示；大盒子使用描边显示，里面包含了图片和下面的文字。
三、想要将文字弄到画面上去，这时候需要对header添加相对定位，对文字标签p添加绝对定位。
四、对文字添加了绝对定位后，如图效果，然后就需要对其设置下位置关系了。
五、位置关系通常就是top bottom left right 上下左右四个方向了，最后完成了。
