html 文字显示在图片上的方法

发布时间：01/15 来源：浏览：关键词：

下面我来给各位同学介绍关于在html中利用css的position:absolute来实现把文字显示在图片上了，希望些文章对各位有帮助。

方案一：文字浮动定位到图片上

代码如下
<div class="img_wd"> <div class="c_img"><img src="test.jpg" width="100px" height="100px"/></div> <div class="c_words">测试文字</div> </div> <style> .c_img{position:relative;} .c_words{position:absolute;top:35px;height:30px;line-height:30px;} </style>

如要文字居中显示：top值=(图片高度-文本div高度)/2

如需要求水平居中：left=(图片宽度-文本div宽度)/2

方案二：用图片做文字图层背景

代码如下
<div class="img_wd">测试文字</div> <style> .img_wd { background:url(test.jpg) top center no-repeat; width:100px;height:100px;line-heiht:100px; text-align:center; } </style>