html+css怎么在图片上添加文字

html+css怎么在图片上添加文字,第1张

html+css在图片上添加文字有两种方法如下:

1.添加一个DIV,采用绝对定位,图片所饥指桥属DIV为基准

<div style="position:relativewidth:100pxheight:100px">

<img src="" alt="" />

<div style="position:absolutewidth:100pxheight:100pxz-indent:2left:0top:0">

文字

</div>

</div>

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

<div style="background:url(abc.jpg) no-repeat left top">

wenzi

</div>

背景图片现在有了,然后在上面写上你需要写的字就可以了逗悉。

工具/材料:电脑。

css让文字显示在图片上的 *** 作步骤如下:

1、首先在div里面书写文字,然后放入1张图片丛乱辩。

2、这陪逗时应该先给div设置宽度和高度,保证文字有1个范围。

3、然后通过background给div添加1张图片作为它的背景。

4、然后通过url()来连接图片,这个时候url里面放置的就是背景图片的路径。

5、然后放入1张图片用作背景,注意路径正确。

6、最后点击保存,文字就会渗缺覆盖在图片上,css让文字显示在图片上的问题就解决了。

文字在图片上显示

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

#abox{

position:relative/*容器相对定位*/

width:300px/*宽度300px*/

margin:0 auto/*横向居中*/

}

#abox img{

width:300px/*宽度300px*/

}

span{

position:absolute/*文字容器绝对定位*/

display:block/*span转为块元素*/

width:100%/*宽度相闭镇对于父容器100%*/

text-align:center/*文字轿液粗居中*/

top:0/*距离父容器顶部0*/

left:0/*距离父容器左侧0*/

color:red/*文字颜色红色*/

font-size:18px/*文字大小既文字高度18px*/

font-weight:bold/*文字加粗*/

}

</style>

</head>

<body>

<div id="abox"><!--容器,相对定位-->

  <img src="123.jpg"><!--图片-->

  <span>我要显示文字</span><!--文字,绝对定位-->

</div>

</body>

<埋埋/html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11990068.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存