html+css在图片上添加文字有两种方法如下：
1.添加一个DIV，采用绝对定位，图片所属DIV为基准
<div style="position:relativewidth:100pxheight:100px">
<img src="" alt="" />
<div style="position:absolutewidth:100pxheight:100pxz-indent:2left:0top:0">
文字
</div>
</div>
第二种方法:图片作为背景图片
<div style="background:url(abc.jpg) no-repeat left top">
wenzi
</div>
背景图片现在有了，然后在上面写上你需要写的字就可以了。
如何使用CSS将文字显示在水平线中间？下面本篇文章就来给大家介绍使用CSS实现文字显示在水平线中间效果的方法，希望对大家有所帮助。
CSS提供了在网页中间制作包含文字或图像的水平线以使其具有吸引力的功能，这可以通过使用简单的CSS属性来实现。
语法：
示例1：将文字显示在水平线中间
效果图：
示例2：将图像显示在水平线中间
效果图：
本文参考地址： https://www.html.cn/qa/css3/10295.html
文字在图片上显示
<!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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）