导读：下面我来给各位同学介绍关于在html中利用css的position:absolute来实现把文字显示在图片上了，希望些文章对各位有帮助。方案一：文字浮动定位到图片上代码如下复制...
下面我来给各位同学介绍关于在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>
