溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“html讓文字在圖片表面的方法”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“html讓文字在圖片表面的方法”，給大家總結了以下內容，具有一定借鑒價值，內容詳細步驟清晰，細節(jié)處理妥當，希望大家通過這篇文章有所收獲，下面讓我們一起來看看具體內容吧。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優(yōu)雅的前端網頁。
html讓文字在圖片表面的方法：1、使用“background-image”定義背景圖片，2、使用“img”定義圖片，將img塊與文字塊放在同一div中；然后通過position屬性，利用絕對定位和相對定位來設置圖片和文字的位置即可。
方法1：將 image 作為背景圖片，即：background-image:url(".......");
在此可以控制背景圖片的橫向和縱向的平鋪：
background-repeat : none; 不進行平鋪
background-repeat : repeat-x; 橫向x軸進行平鋪
background-repeat : repeat-y; 橫向y軸進行平鋪
background-repeat : repeat; 橫向x軸與縱向y軸都進行平鋪，這也是默認情況的狀態(tài)
示例：
<!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="...." /> <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" width="500"/>
<div style="position:absolute; z-index:2; left:10px; top:10px">
haha
</div>
</div>
</body>
</html>
關于position中relative 以及 absolute 屬性值的區(qū)別：
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
感謝你的閱讀，希望你對“html讓文字在圖片表面的方法”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
