HTML讓文字在圖片上顯示的幾種方法

第一種方式是image 作為背景圖片，即：background:url(".......");

例如如下代碼塊：

<div style="background:url('loading.gif') no-repeat;width:100px;height:50px">添加文字...添加文字...添加文字...</div>

第二種方式是將img塊與文字塊（文字塊采用span標簽顯示）放在同一個div 中，然后設置他們之間的位置，例如如下代碼塊：

?

<div style="position: relative; width: 170px; height: 89px;">

<img src="loading.gif" width="170" height="89" alt="">

<span style="position: absolute; top: 0; left: 0;">添加文字...添加文字...添加文字...</span>

</div>

?

第三種方式是將img塊與文字塊（文本塊存放在div中）放在同一個div 中，然后設置他們之間的位置，例如如下代碼塊：

?

<div style="position:relative;">

　　<img src="loading.gif" />

　　<div style="position:absolute; z-index:2; left:10px; top:10px">添加文字...添加文字...添加文字...</div>

</div>

總結

以上是生活随笔為你收集整理的HTML让文字在图片上显示的几种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。