如何用CSS往图片上嵌入文字？？
发布网友
发布时间：2022-04-22 07:59
共5个回答
热心网友
时间：2022-06-18 05:14
具体操作步骤如下：
一、首先是准备一个HTML文档，接着在HTML中添加一个DIV，并给DIV设置宽高和背景图片。
二、接下来运行页面就可以看到如下图所示的带背景图片的div了。
三、然后在div中包裹文字就可以了，如下图所示。
四、运行页面我们就可以看到图片上显示出文字了，如下图所示，以上就是用CSS往图片上加文字的实现了。
热心网友
时间：2022-06-18 05:14
用CSS往图片上嵌入文字有二种方法，分别如下：
第一种方法、添加一个DIV，采用绝对定位，图片所属DIV为基准。
参考代码如下：
<div style="position:relative;width:100px;height:100px;"><img src="" alt="" />
<div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
文字
</div>
</div>
第二种方法、图片作为背景图片。
参考代码如下：
<div style="background:url(abc.jpg) no-repeat left top;">wenzi
</div>
热心网友
时间：2022-06-18 05:15
<div class="picbg">文字</div>
写段样式表给这个div定义个背景图：
.picbg{
width:124px;height:30px;/*宽高*/
line-height:30px;/*文字行高*/
background:url(../images/subnav.gif) no-repeat;/*背景图*/
}
热心网友
时间：2022-06-18 05:15
<style type="text/css">
img{border:0;}
.a{position:relative; margin-left:10px;top:-50px;text-decoration:none; color: #F00;}
/*用两个div,使用相对定位，把top值设成负值，就行了！*/
</style>
++++++++++++++++++++++++++++++++++++++++++++++++
<div class="img">
<a href="#"><img src="images/pic4.gif" alt="产品名称" width="107" height="87" /></a>
</div>
<div class="a">
产品名称
</div>
热心网友
时间：2022-06-18 05:16
1、准备一个HTML文档，注意设置UTF-8的格式
2、接着在HTML中添加一个DIV，并给DIV设置宽高和背景图片
3、在运行页面就可以看到如下图所示的带背景图片的div了
4、在div中包裹文字就可以了
5、运行页面可以看到图片上显示出文字了
6、可以直接给文字添加样式，比如居中对其，文字颜色等
7、最终效果，文字的样式也变了，在图片上用CSS加文字的实现了
