如題：

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

在此可以控制背景圖片的橫向和縱向的平鋪：

background-repeat : none;　　不進行平鋪

background-repeat : repeat-x;　　橫向x軸進行平鋪

background-repeat : repeat-y;　　橫向y軸進行平鋪

background-repeat : repeat;　　橫向x軸與縱向y軸都進行平鋪，這也是默認情況的狀態

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

<div style="position:relative;">

　　<img src="...." />

　　<div style="position:absolute; z-index:2; left:10px; top:10px">

　　　　haha

　　</div>

</div>

其余的位置再根據實際情況進行微調就好~~

關於position中relative 以及 absolute 屬性值的區別：

position：absolute這個是絕對定位；
是相對於瀏覽器的定位。
比如：position：absolute；left:20px;top:80px; 這個容器始終位於距離瀏覽器左20px,距離瀏覽器上80px的這個位置。

position：relative是相對定位，是相對於前面的容器定位的。這個時候不能用top left在定位。應該用margin。

比如：<div class="1"></div><div class="2"></div>

當1固定了位置。1的樣式float:left;width:100px; height:800px;
2的樣式為float:left; position：relative；margin-left:20px;width:50px;
2的位置在1的右邊，距離120px

更多請看： http://net08118.blog.163.com/blog/static/11011170420129193741264/

　　 http://blog.csdn.net/chhuma/article/details/7484940

如果想限制img 標簽的最大寬高，可以用max-width 和 max-height 這兩個屬性，如下代碼：

<img src="......" style="max-width:100px; max-height:100px" />

Html 讓文字顯示在圖片的上面