css怎么在图片上添加文字

发布网友发布时间：2022-04-22 07:48

共5个回答

懂视网时间：2022-05-13 16:29

css实现的在图片上面添加文字说明:
在一些图片效果中，图片上面会有文字说明，下面就通过代码实例介绍一下如何实现此效果。
代码实例如下:

蚂蚁部落  蚂蚁部落欢迎您

以上代码实现了我们的要求，图片上面有文字说明，并且具有半透明效果。实现原理非常的简单，也就是设置最外层div使用相对定位，然后设置span元素绝对定位，这样就可以以外层div为定位参考对象，然后设置top属性值就可以了。但是上面的并不完美，因为不但背景透明了，而且文字也透明了，这往往并不是我们希望看到的，代码如下:

蚂蚁部落   蚂蚁部落欢迎您

以上代码实现了我们的要求，背景透明但是文本不透明。在上面的代码中，之所以文字透明，是因为透明属性具有继承性，子元素也会出现透明效果，这样就可以利用定位的方式将存放文本的span元素覆盖与半透明的span元素之上。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12679

更多内容可以参阅:http://www.softwhy.com/divcss/

热心网友时间：2022-05-13 13:37

文字在图片上显示

<!DOCTYPE html>

<html>

<head>

<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>

<span>我要显示文字</span>

</div>

</body>

</html>

热心网友时间：2022-05-13 14:55

付费内容限时免费查看回答您好，可以通过手机自带功能添加，现在的手机应该大部分都会自带添加文字、添加水印的功能了。直接打开手机相册里的图片就可以看到，操作也很简单。

1打开相册选中图片

2.点击【编辑】【文字】

3.选择样式修改文字

如果是在电脑端，右键点击图片，选择打开方式，选择系统自带的画图。

点击画图工具里的A，也就是文本工具。

在图上点击一下，然后输入文字即可。

希望对您有所帮助哦～

提问我在手机上操作，请教操作步骤，谢谢！

回答3.选择样式修改文字

提问解答全面，评价：五个五星

回答谢谢，祝您生活愉快

热心网友时间：2022-05-13 16:30

付费内容限时免费查看回答您好，很高兴回答您的问题，您可以使用图片编辑软件，比如说美图秀秀

也可以

1、登录QQ，打开一个对话框，找到小剪刀形状的截图工具，选择截图工具，截取所需图片。

2、点击“A”按钮，在想添加文字的地方点击一下，会出现一个小框，在小框内可以输入文字。

3、可以通过截图下方的工具进行修改，编辑完成之后，点击截图右下角的“完成”按钮即可。

热心网友时间：2022-05-13 18:21

先设置一个div并插入图片，设置这个div相对定位。
再第一个div里插入第二个div设置绝对定位，并输入文字即可。

全部栏目

css怎么在图片上添加文字