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>
如果想限制img 標籤的最大寬高,可以用max-width 和 max-height 這兩個屬性,如下代碼:
<img src="......" style="max-width:100px; max-height:100px" />