首頁  >  文章  >  web前端  >  html怎麼讓文字在圖片表面

html怎麼讓文字在圖片表面

青灯夜游
青灯夜游原創
2021-02-22 11:36:2833008瀏覽

html讓文字在圖片表面的方法:1、使用「background-image」定義背景圖片,2、使用「img」定義圖片,將img區塊與文字區塊放在同一div中;然後透過position屬性,利用絕對定位和相對定位來設定圖片和文字的位置即可。

html怎麼讓文字在圖片表面

本教學操作環境: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>

效果圖:

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>

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