HTML如何在圖片上添加文字
當我們開發一個頁面，插入圖片時，需要有一組文字對圖片進行描述。那么HTML中如何在圖片上添加文字呢？這篇文章告訴你。
先讓我們來看下效果圖：
句子“這是一張夜空圖片”被放置在了圖片的左下角。
那么這個是如何設置的呢。
首先我們要設計一個 div，將圖片的和文字放置在 div 里面，設置文字的樣式。隨后需要用到“定位”，將 div 設置為父級，為相對定位，?position：relative?；將h1設置為絕對定位，?position：absolute?。在調整合適的位置即可。源代碼如下：
<!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>圖片素材：
以上就是?HTML 中如何在圖片上添加文字問題的全部解答。同學們可以自行保存素材進行練習鞏固。
