css怎么在图片上加文字?

css在图片上添加文字的方法:1、使用两个div分别放图片和文字,采用绝对定位并以图片所属div为准,即可将文字添加到图片上。2、以图片做背景,然后文字就可以添加到图片上。

css在图片上添加文字的方法:

第一种方法:

添加一个DIV,采用绝对定位,图片所属DIV为基准

<!DOCTYPE html>
<html>
<head> 

</head>
<body>
 
<div style="position:relative;width:100px;height:100px;">
<img src="1.webp" alt="1.webp" />
<div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
文字文字文字文字文字文字文字
</div>
</div>
 
</body>
</html>

效果图:

第二种方法:图片作为背景图片

<!DOCTYPE html>
<html>
<head> 

</head>
<body>
 
<div style="background:url(1.webp) no-repeat left top;">
文字文字文字文字文字文字
</div>
 
</body>
</html>

效果图:

以上就是css怎么在图片上加文字?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读