html讓文字在圖片表面的方法:1、使用「background-image」定義背景圖片,2、使用「img」定義圖片,將img區塊與文字區塊放在同一div中;然後透過position屬性,利用絕對定位和相對定位來設定圖片和文字的位置即可。
本教學操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。
方法1:將image 作為背景圖片,即:background-image:url(".......");
在此可以控制背景圖片的橫向與縱向的平鋪:
background-repeat : none; 不進行平鋪
background-repeat : repeat- x; 橫向x軸進行平鋪
background-repeat : repeat-y; 橫向y軸進行平鋪
#background-repeat : repeat; 橫向x軸與縱向y軸都進行平鋪,這也是預設情況的狀態
範例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ width: 100%; height: 500px; background-image:url(demo/img/5.jpg); background-size:100%; background-repeat:no-repeat; color: red; font-size: 20px; } </style> </head> <body> <div> hello! </div> </body> </html>
效果圖:
方法2:將img區塊與文字區塊放在同一個div 中,然後設定他們之間的位置
例如如下程式碼區塊:
<div style="position:relative;"> <img src="...." / alt="html怎麼讓文字在圖片表面" > <div style="position:absolute; z-index:2; left:10px; top:10px"> haha </div> </div>
其餘的位置再根據實際情況進行微調就好~~
範例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div{ width: 100%; color: red; font-size: 20px; } </style> </head> <body> <div style="position:relative;"> <img src="demo/img/5.jpg" style="max-width:90%"/ alt="html怎麼讓文字在圖片表面" > <div style="position:absolute; z-index:2; left:10px; top:10px"> haha </div> </div> </body> </html>
##關於position中relative 以及absolute 屬性值的差異:
position:absolute這個是絕對定位;是相對於瀏覽器的定位。 例如:position:absolute;left:20px;top:80px; 這個容器總是位於距離瀏覽器左20px,距離瀏覽器上80px的這個位置。 position:relative是相對定位,是相對於前面的容器定位的。這時候不能用top left在定位。應該用margin。 例如: 當1固定了位置。 1的樣式float:left;width:100px; height:800px;2的樣式為float:left; position:relative;margin-left:20px;width:50px;2的位置在1的右邊,距離120px更多程式相關知識,請造訪:程式設計影片! !
以上是html怎麼讓文字在圖片表面的詳細內容。更多資訊請關注PHP中文網其他相關文章!