html怎麼讓文字在圖片表面
- 青灯夜游原創
- 2021-02-22 11:36:2832923瀏覽
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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn