2首先，我们应该先给div设置宽度和高度，保证文字有一个范围3然后通过background给div添加一张图片作为它的背景4通过url来连接图片，url里面放置的就是背景图片的路径5放一张图片用作背景，注意，路径要写对6保存之后文字就会覆盖在图片的上面了，而如果使用img标签，则没有这种效。

2找到background，如下图示，在background的后面添加上图片作为这个的背景图案3之后在background后面加上url，为了连接图片，在url里面写的就是背景图片的路径4可以根据个人喜好放入喜欢的图片，在这里路径一定要写对5这样，保存之后文字就会覆盖在图片的上面了。

在html中字浮于图上的话1通过使用一个div或者是p然后写上你所需要的字，然后在将那个图片设置成背景就行了ltdiv style=#39backgroundurl#39图片地址#39#39 ltp我是测试文字ltp ltdiv 2你可以使用一个zindex的属性，设置层，将文字层置于图片图片之上，在来一个position定位就行了。

一image 作为背景图片，即backgroundurlquotquot例如如下代码块ltdiv style=quotbackgroundurl#39loadinggif#39 norepeatwidth100pxheight50pxquot添加文字添加文字添加文字ltdiv 二将img块与文字块文字块采用span标签显示放在同一个div 中，然后设置他们之间的位置。

需要准备的材料分别有电脑浏览器html编辑器1首先，打开html编辑器，新建html文件，例如indexhtml2在indexhtml中的ltbody标签中，输入html代码ltimg src=quotsmall3pngquot ltspanhello imageltspan3浏览器运行indexhtml页面，此时成功在图片右边写了文字“hello image”。

在html文件中，先建立一个div，然后在里面设置一个图片和文字h1，如图所示 现在打开后的样式是这样的，如图，图片在上，文字在下 然后对h1进行简单修饰，对文字大小fontsize和文字颜色color加以修饰 如图所以效果，现在是这样的，这样待会将字移动到图上面时，字也不会超出范围如果要要将字移动到图片。

1图片是一个层2在图片的层上再放一个层，给层设置背景色就好了。

编写html代码时，在图片上加文字实质就是通过css样式设置文字的背景是图片1创建一个新的html文件 2在body标签里创建一个div，在div的p标记里面写入文字 3在head标签里编写css样式，让图片作为文字的背景，并且设置图片不重复4这样编辑html时，在图片上添加文字的问题就解决了。

用两个div，前面div的放图片标签，后面div的放文字部分把后面div在css中加入float属性，浮动起来，这样它就会“飘”在图片上面最后利用在css中利用position属性，就能把图片和文字定位到合适的位置。

lt！DOCTYPE htmllthtml lang=quotenquotltheadltmeta charset=quotUTF8quotlttitle图片上写字lttitleltstyle type=quottextcssquotspan position absoluteleft 200pxcolor #ffffont 50px350px #39微软雅黑#39ltstyleltheadltbodyltimg src=quotpicjpgquotltspan我是文字ltspanltbodylt。

可以以html为例，步骤一在body中建立文字信息以及图片内容，也就是在header中包含两个同级，图片和文字二在CSS中对文字图片进行简单样式添加，效果如图所示大盒子使用描边显示，里面包含了图片和下面的文字三想要将文字弄到画面上去，这时候需要对header添加相对定位，对文字标签p添加绝对。

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

ltstyleltdiv class=quotceshiquot ltdiv class=quotdiv1quotltdiv ltdiv class=quotdiv2quot我是文字ltdivltdiv用一个以红色为背景颜色可看成红色纯色的图片为实例可以用很多种方法实现文字在图片上层根据问题需要，利用优先级的方法来操作的以上是html+css，实现的效果如下这里我建立。

可以加个悬浮代码让文字浮于图片上，也可以加个分割之类的代码，让图片和文字分开排版。

HTML图片和文字是并列显示的如下1 将文字浮在图片上我们加个div把图片和文字包在一起，并且加上imggroup和imgtip这两个class，便于后面的处理我们要让文字浮在图片上面，需要加上定位看文字浮在了图片的底部display inlineblock与定位无关，只是使整个imggroup长宽与图片适应2。