HTML如何在图片上写字?不是背景图片。
发布网友
发布时间：2022-04-23 07:47
共5个回答
热心网友
时间：2022-04-06 13:47
一、首先HTML和CSS布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上写字</title>
<style type="text/css">
span {
position: absolute;
left: 200px;
color: #fff;
font: 50px/350px '微软雅黑';
}
</style>
</head>
<body>
<img src="pic.jpg">
<span>我是文字</span>
</body>
</html>
二、在开发工具里面的截图：
三、浏览器里面的效果截图：
四、总结一下：这个是在body里面添加一下背景图片，然后再建div就可以布局。
热心网友
时间：2022-04-06 15:05
利用定位来做，直接上干货：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新建网页 4</title>
<style>
.box{width:300px;height:200px;margin:10px;position:relative;}
.word{left:0;top:0;position:absolute;font-size:50px;color:#000;text-align:center;}
</style>
</head>
<body >
<div class="box">
<p class="word">这是图片上的字1</p>
<img src="http://www.o571.com/NewsAdmin/UploadFiles/2010-04/8037/2010040815062699041.jpg" width="300" height="200"/>
</div>
<div class="box">
<p class="word">这是图片上的字2</p>
<img src="http://www.o571.com/NewsAdmin/UploadFiles/2010-04/8037/2010040815062699041.jpg" width="300" height="200"/>
</div>
<div class="box">
<p class="word">这是图片上的字3</p>
<img src="http://www.o571.com/NewsAdmin/UploadFiles/2010-04/8037/2010040815062699041.jpg" width="300" height="200"/>
</div>
</body>
</html>
热心网友
时间：2022-04-06 16:39
可以使用定位来写。以图片所在的块为父级，写相对定位，文字在父级块里写绝对定位，然后定位到你要的位置就好了。
热心网友
时间：2022-04-06 18:31
定位属性 把文字定位到想要的位置
热心网友
时间：2022-04-06 20:39
你好啊·图片上写字很简单的可以使用定位来写。以图片所在的块为父级，写相对定位，文字在父级块里写绝对定位，然后定位到你要的位置就好了。
