图片上加文字html代码(图片上加文字html代码怎么做)

1、ltdiv class=quotcaptionquot图片3ltdiv ltdiv ltdiv ltp这里是文字说明ltp ltbody lthtml 在上面的示例代码中，使用了Flex布局display flex来将三张图片放在一行，并通过设置每个图片占据一行的三分之一。

2、一种方式直接将这个图用ps处理，还有一种html里面有层级代码，修改代码将字这一层放在图片上面 方法1 ps写在图片上 方法2 给标签加入图片背景， 在标签里面写字 方法3 使用img加载图片， 样式设置为固定或绝对定位。

3、1在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字2在CSS中对文字图片进行简单样式添加3效果如图所示大盒子使用描边显示，里面包含了图片和下面的文字4想要将文字弄到画面上去。

4、3然后通过background给div添加一张图片作为它的背景4通过url来连接图片，url里面放置的就是背景图片的路径5放一张图片用作背景，注意，路径要写对6保存之后文字就会覆盖在图片的上面了，而如果使用img标签。

5、使用代码的方法，在图片上加字怎么做到呢 在html文件中，先建立一个div，然后在里面设置一个图片和文字h1，如图所示 现在打开后的样式是这样的，如图，图片在上，文字在下 然后对h1进行简单修饰，对文字大小fontsize和文字。

6、ltstyleltheadltbodyltimg src=quotpicjpgquotltspan我是文字ltspanltbodylthtml 二在开发工具里面的截图三浏览器里面的效果截图四总结一下这个是在body里面添加一下背景图片，然后再建div就可以。

7、代码，要注意图片你要自己放图片，和修改图片路径 lt！DOCTYPE html lthtml lthead ltmeta charset=quotutf8quot lttitle图片上放文字lttitle ltstyle type=quottextcssquot html，body margin0 autoimg display。

8、编写html代码时，在图片上加文字实质就是通过css样式设置文字的背景是图片1创建一个新的html文件 2在body标签里创建一个div，在div的p标记里面写入文字 3在head标签里编写css样式，让图片作为文字的背景，并且设置。

9、把图片设置为背景图片，然后加上文字就可以了 ltstyle img1 width200pxheight200pxbackgroundimageurlquotimg1jpgquot ltstyle ltdiv class=quotimg1quot图片加文字ltdiv。

10、然后在里面加文字，加入的图片代码是ltimg src=quotimggifquot width=#39100pxquotheight=quot50pxquot，改成ltdiv style=quotbackgroundurl#39imggif#39norepeatwidth100pxheight50pxquot这样就可以图片上加文字了ltdiv。

11、效果如图 思路div相对定位 图片默认定位， 文字绝对定位 参考代码 lt！DOCTYPE htmllthtmlltheadltmeta charset=quotUTF8quotlttitlelttitleltstyle type=quottextcssquot*div1下面 包含着1个图片和1段文字*#div1。

12、单纯的html要实现你说的效果很难，必须html和css配合才可以，首先用css为需要设置背景的元素设置背景，然后用html写文字等内容附加一个简单例子，希望帮到你其中1jpg跟这个页面在一个路径lt！doctype htmllthtml。

13、思路两种方法1把图片设置成背景，然后直接写文字即可2第二，写两个div，然后在CSS样式中写入positionrelative需要用top，right和bottom，left来定位随父级定位第二种代码ltdiv class=quotpicturequot ltdiv clas。

14、新建html文件，例如indexhtml2在indexhtml中的ltbody标签中，输入html代码ltimg src=quotsmall3pngquot ltspanhello imageltspan3浏览器运行indexhtml页面，此时成功在图片右边写了文字“hello image”。

15、最简单的办法弄一个div层，把图片当作div的背景就是了。