App下載

HTML如何在圖片上添加文字

猿友 2021-03-16 10:05:37 瀏覽數(shù) (25915)
反饋

當(dāng)我們開發(fā)一個(gè)頁(yè)面，插入圖片時(shí)，需要有一組文字對(duì)圖片進(jìn)行描述。那么HTML中如何在圖片上添加文字呢？這篇文章告訴你。

先讓我們來看下效果圖：

HTML如何給圖片加上文字

句子“這是一張夜空?qǐng)D片”被放置在了圖片的左下角。

那么這個(gè)是如何設(shè)置的呢。

首先我們要設(shè)計(jì)一個(gè) div，將圖片的和文字放置在 div 里面，設(shè)置文字的樣式。隨后需要用到“定位”，將 div 設(shè)置為父級(jí)，為相對(duì)定位，?position：relative?；將h1設(shè)置為絕對(duì)定位，?position：absolute?。在調(diào)整合適的位置即可。源代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>W3Cschool</title>
	<style>
		div{
			position: relative;
		}
		h1{font-size: 32px;
			color: white;
			position:absolute;
			top:250px;
			left:10px;}
	</style>
</head>
<body>
	<div>
		<img src="./image/night.png" alt="">
		<h1>這是一張夜空的圖片</h1>
	</div>
</body>
</html>

圖片素材：

夜空?qǐng)D片

以上就是 HTML 中如何在圖片上添加文字問題的全部解答。同學(xué)們可以自行保存素材進(jìn)行練習(xí)鞏固。


HTML 前端

1 人點(diǎn)贊