HTML中给图片上增加文字的代码怎么写

用代码的方式，给图片上标上文字，小编这里使用定位的方法，将文字定位到想要的任意位置

操作方法

  • 01

    如图；在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字

  • 02

    在CSS中对文字图片进行简单样式添加

  • 03

    效果如图所示；大盒子使用描边显示，里面包含了图片和下面的文字

  • 04

    想要将文字弄到画面上去，这时候需要对header添加相对定位，对文字标签p添加绝对定位

  • 05

    对文字添加了绝对定位后，如图效果，然后就需要对其设置下位置关系了

  • 06

    位置关系通常就是top  bottom left right 上下左右四个方向了

  • 07

    定位到右上方位置，最后效果就是这样了。

赞 (0)

相关推荐

  • 电脑如何在自带的画图工具上在图片上增加文字

    电脑如何在自带的画图工具上在图片上增加文字

    我们经常会使用电脑自带画图工具修改图片,今天小编就跟大家分享一下电脑如何在自带的画图工具上在图片上增加文字.具体如下:1. 首先我们打开电脑,点击左下方的开始菜单栏,在弹出的窗口中点击所有程序.2. ...

  • 美图秀秀如何在图片上增加文字？

    有一天看到写美食的的朋友,图片很特别,上面有自己的专属文字,我觉得很漂亮也很受用,于是摸索了一番,终于找到了一种方法和大家一起分享一下. 操作方法 01 第一步,选取图片,我这里选的是一个自己傍晚拍的 ...

  • 手机美图秀秀app中如何在图片上增添文字

    手机美图秀秀app中如何在图片上增添文字

    美图秀秀是我们现在经常使用的照片编辑软件,我们可以在图片上增添文字来更好的表达效果,今天小编就告诉大家手机美图秀秀app中如何在图片上增添文字.具体如下:1. 首先我们打开手机中的美图秀秀,进入主界面 ...

  • [Photoshop教程]怎么在图片上添加文字

    Photoshop中在图片上添加文字的方法. 步骤 01 首先,我们用Photoshop打开要添加文字的图片. 02 然后在左边的工具栏里找到文字工具. 03 文字工具中的横排文字工具和直排文字工具都 ...

  • 在word文档中如何在图片上添加文字呢?

    在使用word文档输入文字时,有时为了在图片上添加一些说明,让人看了一目了然,那么在word文档中如何在图片上添加文字呢?下面小编就为大家详细介绍一下,来看看吧! 步骤 1.点击[插入]-[图片]-[ ...

  • 怎么利用微信小程序把图片上的文字转到word文本中？

    怎么利用微信小程序把图片上的文字转到word文本中？

    为了能快速方便的记录一些资料,很多人会选择先使用手机把需要存档的资料文件先拍照记录到手机照片中,然后再导出图片后根据图片上的文字一个个录入到电脑文本中,这样操作费时又费力.其实我们可以借助微信中的一些 ...

  • PS中怎么把图片上的文字P掉？

    PS是现在很多人喜欢用的软件之一,在使用时我们常常需要进行图片操作,本次就给大家介绍PS中怎么把图片上的文字P掉,快来看看吧. 操作方法 01 方法一:在PS中打开一张需要操作的图片,右键单击选择&q ...

  • macbookpro怎么复制粘贴图片上的文字（苹果macbookpro怎么复制图片里文字）

    macbookpro怎么复制粘贴图片上的文字（苹果macbookpro怎么复制图片里文字）

    苹果发布了MacBook Pro2021款,在最新款的MacBook Pro中苹果不仅为其更换上最强的芯片,还增加了很多功能,这些功能都非常的实用比如直接复制图片里的文字,下面我们分享如何在MacBo ...

  • 怎样在图片上添加文字？

    我们经常会需要在图片上添加文字,用来解释说明,或者增加图片的表达效果.在手机上我们已经有很多好的应用可以随时为自己用手机拍摄的照片添加文字说明了,这些功能方便实用也非常适合在移动端使用.但当我们需要在 ...