如何用CSS往图片上嵌入文字??

RT,就是给图片上面加上文字,不要告我自己画上去这类的~~!,那种文字复制不了。就要CSS。如果很费劲的话我酌情加分... RT,就是给图片上面加上文字,不要告我自己画上去这类的~~!,那种文字复制不了。就要CSS。如果很费劲的话我酌情加分 展开
 我来答
苏Kate
高粉答主

2019-06-11 · 说的都是干货,快来关注
知道答主
回答量:1346
采纳率:0%
帮助的人:52.3万
展开全部

具体操作步骤如下:

一、首先是准备一个HTML文档,接着在HTML中添加一个DIV,并给DIV设置宽高和背景图片


二、接下来运行页面就可以看到如下图所示的带背景图片的div了。

三、然后在div中包裹文字就可以了,如下图所示。

四、运行页面我们就可以看到图片上显示出文字了,如下图所示,以上就是用CSS往图片上加文字的实现了。

一骑当后
推荐于2017-09-05 · 知道合伙人数码行家
一骑当后
知道合伙人数码行家
采纳数:40298 获赞数:306436
网络、设备维护、电路、弱电检测。

向TA提问 私信TA
展开全部

  用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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友a91dbe362
推荐于2017-10-06 · TA获得超过1.1万个赞
知道大有可为答主
回答量:4087
采纳率:0%
帮助的人:4302万
展开全部
<div class="picbg">文字</div>

写段样式表给这个div定义个背景图:

.picbg{
width:124px;height:30px;/*宽高*/
line-height:30px;/*文字行高*/
background:url(../images/subnav.gif) no-repeat;/*背景图*/
}
本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
flyrose25
2011-12-25 · TA获得超过181个赞
知道小有建树答主
回答量:524
采纳率:0%
帮助的人:221万
展开全部
<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>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
愚乔啊
高粉答主

2019-06-13 · 繁杂信息太多,你要学会辨别
知道小有建树答主
回答量:1592
采纳率:100%
帮助的人:39.7万
展开全部

1、准备一个HTML文档,注意设置UTF-8的格式

2、接着在HTML中添加一个DIV,并给DIV设置宽高和背景图片

3、在运行页面就可以看到如下图所示的带背景图片的div了

4、在div中包裹文字就可以了

5、运行页面可以看到图片上显示出文字了

6、可以直接给文字添加样式,比如居中对其,文字颜色等

7、最终效果,文字的样式也变了,在图片上用CSS加文字的实现了

本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 1条折叠回答
收起 更多回答(3)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式