1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：span {position: absolutetop: 45pxleft: 180px}。
3、浏览器运行index.html页面，此时成功通过css设置了文字在图片上面居中显示。
文字在图片上显示
<!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>
工具/材料：电脑。
css让文字显示在图片上的操作步骤如下：
1、首先在div里面书写文字，然后放入1张图片。
2、这时应该先给div设置宽度和高度，保证文字有1个范围。
3、然后通过background给div添加1张图片作为它的背景。
4、然后通过url()来连接图片，这个时候url里面放置的就是背景图片的路径。
5、然后放入1张图片用作背景，注意路径正确。
6、最后点击保存，文字就会覆盖在图片上，css让文字显示在图片上的问题就解决了。
