可以以html為例，步驟一在body中建立文字信息以及圖片內(nèi)容，也就是在header中包含兩個(gè)同級(jí)，圖片和文字二在CSS中對(duì)文字圖片進(jìn)行簡(jiǎn)單樣式添加，效果如圖所示大盒子使用描邊顯示，里面包含了圖片和下面的文字三。

編寫html代碼時(shí)，在圖片上加文字實(shí)質(zhì)就是通過(guò)css樣式設(shè)置文字的背景是圖片1創(chuàng)建一個(gè)新的html文件 2在body標(biāo)簽里創(chuàng)建一個(gè)div，在div的p標(biāo)記里面寫入文字 3在head標(biāo)簽里編寫css樣式，讓圖片作為文字的背景，并且設(shè)置圖。

2在indexhtml中的ltbody標(biāo)簽中，輸入html代碼ltimg src=quotsmall3pngquot ltspanhello imageltspan3瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)成功在圖片右邊寫了文字“hello image”。

把圖片設(shè)置為背景圖片，然后加上文字就可以了 ltstyle img1 width200pxheight200pxbackgroundimageurlquotimg1jpgquot ltstyle ltdiv class=quotimg1quot圖片加文字ltdiv。

在html中字浮于圖上的話1通過(guò)使用一個(gè)div或者是p然后寫上你所需要的字，然后在將那個(gè)圖片設(shè)置成背景就行了ltdiv style=#39backgroundurl#39圖片地址#39#39 ltp我是測(cè)試文字ltp ltdiv 2你可以使用一個(gè)z。

用js寫，先得到圖片的offsetLeft和offsetTop，然后寫個(gè)div層吧層定位到圖片的位置層里寫字就行了。

輸入js代碼ltdiv style=quotbackgroundimage urlsmall2png height60pxquot lta href=quotquot院系設(shè)置lta ltdiv 3瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)圖片上成功添加了“院系設(shè)置”的鏈接文本。

3然后通過(guò)background給div添加一張圖片作為它的背景4通過(guò)url來(lái)連接圖片，url里面放置的就是背景圖片的路徑5放一張圖片用作背景，注意，路徑要寫對(duì)6保存之后文字就會(huì)覆蓋在圖片的上面了，而如果使用img標(biāo)簽。

1可以用一個(gè)最大的div層 包裹住，左邊一個(gè)div 左浮動(dòng)，右邊一個(gè)div右浮動(dòng)，左邊的就是一個(gè)logo圖，主要處理在右邊2右邊的div定義好之后，在細(xì)分為上中下，三個(gè)大div，最上面的div 可以左右浮動(dòng)，左邊一個(gè)span。

一image 作為背景圖片，即backgroundurlquotquot例如如下代碼塊ltdiv style=quotbackgroundurl#39loadinggif#39 norepeatwidth100pxheight50pxquot添加文字添加文字添加文字ltdiv 二將img塊。

用img的alt屬性，例如ltimg src=quotpathquotalt=quot這是一張圖quot這樣寫的話，你把鼠標(biāo)移動(dòng)到圖片上時(shí)，alt里的字就會(huì)顯示出來(lái)，如果你的src無(wú)效，alt里的字將取代圖片直接出現(xiàn)。

新建html文件，例如indexhtml2在indexhtml中的ltbody標(biāo)簽中，輸入html代碼ltimg src=quotsmall3pngquot ltspanhello imageltspan3瀏覽器運(yùn)行indexhtml頁(yè)面，此時(shí)成功在圖片右邊寫了文字“hello image”。

思路兩種方法1把圖片設(shè)置成背景，然后直接寫文字即可2第二，寫兩個(gè)div，然后在CSS樣式中寫入positionrelative需要用top，right和bottom，left來(lái)定位隨父級(jí)定位第二種代碼ltdiv class=quotpicturequot ltdiv clas。

然后在里面加文字，加入的圖片代碼是ltimg src=quotimggifquot width=#39100pxquotheight=quot50pxquot，改成ltdiv style=quotbackgroundurl#39imggif#39norepeatwidth100pxheight50pxquot這樣就可以圖片上加文字了ltdiv。

3 鼠標(biāo)懸浮特效現(xiàn)在靜態(tài)效果已經(jīng)完成了，接下來(lái)，加一下鼠標(biāo)懸浮出現(xiàn)文本的效果，現(xiàn)在imgtip添加如下代碼，讓文本默認(rèn)隱藏再加上鼠標(biāo)懸停在圖片上，顯示文本的代碼代碼總匯HTML ltdiv class=quotimggroupquot ltimg src。

使用代碼的方法，在圖片上加字怎么做到呢 在html文件中，先建立一個(gè)div，然后在里面設(shè)置一個(gè)圖片和文字h1，如圖所示 現(xiàn)在打開后的樣式是這樣的，如圖，圖片在上，文字在下 然后對(duì)h1進(jìn)行簡(jiǎn)單修飾，對(duì)文字大小fontsize和文字。

效果如圖 思路div相對(duì)定位 圖片默認(rèn)定位， 文字絕對(duì)定位 參考代碼 lt！DOCTYPE htmllthtmlltheadltmeta charset=quotUTF8quotlttitlelttitleltstyle type=quottextcssquot*div1下面 包含著1個(gè)圖片和1段文字*#div1。

用img的alt屬性，例如ltimg src=quotpathquot alt=quot這是一張圖quot這樣寫的話，你把鼠標(biāo)移動(dòng)到圖片上時(shí)，alt里的字就會(huì)顯示出來(lái)，如果你的src無(wú)效，alt里的字將取代圖片直接出現(xiàn)。