網頁上的圖像有時可以添加文本。可以根據如何在圖像上放置文本來製作字幕。你不能將文本放在只有 HTML 元素的圖像之上。為此，我們需要使用 CSS 屬性。
Web 開發人員製作的網站看起來不錯，這樣用戶才會更感興趣、更開心。在圖像上放置文本是開發人員向網站添加視覺元素的一種方式。考慮到響應性，重要的是要確保文本保持不變，即使圖像會自行調整大小也是如此，因為它是響應式的。
如何在圖像上放置文本
創建照片時圖庫或類似的東西，您可能需要在圖像上放置一些標題文本或描述。您可以將 CSS 定位方法與 margin 屬性結合使用，以將文本定位或放置在圖像（即元素）上。
左上角
第一個位置我們要設置的文本是圖像的左上角。使用以下代碼片段。
CSS:我們將第一個 div 元素的位置設置為“相對”，這樣我們就可以將第二個 div 元素的位置設置為“絕對” ”圖像上的文字已指定大小、粗細、樣式和顏色。 top 和 left 屬性已用於將文本放在左上角。
左下角
目的是在圖像的左下角添加文本使用下面提到的代碼。
CSS:其餘代碼是相同的，但是，為了將文本定位在左下角，我們將 bottom 屬性設置為 3 %，並將財產留給 8%。您可以更改這些屬性的值以了解它們的工作原理。
居中
同樣，要將文本置於中心位置，請考慮下面提到的示例。為了調整圖像中心位置的文本，我們將 top 屬性和 left 屬性設置為 40%。
右上角
我們只是做了以下操作將文本放在右上角是我們將 top 屬性設置為 2%，將 right 屬性設置為 10%。這不是硬性規定，因此，您可以根據需要更改這些值。
右下角
如您所見，其餘代碼是與前面的示例相同，唯一的區別是將文本放在右下角，我們使用了 bottom 屬性和 right 屬性。
FAQ
如何更改位置圖片中文本的位置?
使用 CSS 位置屬性，您可以設置文本在圖像上的位置。您可以通過將圖像和文本放在 HTML 中的“div”中來實現。然後，讓 div 的位置“相對”，文本的位置“絕對”。絕對元素根據其父元素所在的位置 (div) 放置。
如何在響應式圖像上放置文本?
您可以使用CSS 位置屬性。為此，將 position:absolute 添加到文本，將 position:relative 添加到圖像。將它們都放在一個 div> 元素中。我們還可以使用 top、bottom、left 和 right 屬性將文本放在圖像上的特定位置。
如何在 CSS 中指定文本位置?
h1 { text-align: 中心; } h2 { 文本對齊:左； } h3 { 文本對齊:右；… 對齊三個
元素中的最後一行文本: p.a { text-align-last: right; } p.b { text-align-last: center; } p.c {… 設置文本中圖像的垂直對齊方式:img.a { vertical-align: baseline; } img.b { 垂直對齊:文本頂部； }