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

如題：

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

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

background-repeat : none;　　不進行平鋪

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

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

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

?

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

<div style="position:relative;">

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

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

　　　　haha

　　</div>

</div>

其余的位置再根據(jù)實際情況進行微調(diào)就好~~

?

關(guān)于position中relative 以及 absolute 屬性值的區(qū)別：

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

position：relative是相對定位，是相對于前面的容器定位的。這個時候不能用top left在定位。應(yīng)該用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" />

總結(jié)

以上是生活随笔為你收集整理的Html 让文字显示在图片的上面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。