問題描述

如何在 HTML 中的影像上放置文字。每次輸入以下程式碼時，文字都會在影像之下。

<img src="example.jpg">Text</img>

最佳解決方法

您需要在 relatively-positioned img 標籤上使用 absolutely-positioned CSS 。文章 Text Blocks Over Image 給出了一個 step-by-step 示例，用於將文字放置在影像上。

次佳解決方法

<img> 元素是空的 – 它沒有結束標籤。

如果影像是 a background image, use CSS 。如果是內容影像，則在容器上設定 position: relative，然後將 absolutely position 設定為其中的影像和/或文字。

第三種解決方法

您可以建立與影像大小完全相同的 div 。

<div class="imageContainer">Some Text</div>

使用 css background-image 屬性來顯示影像

 .imageContainer {
       width:200px; 
       height:200px; 
       background-image: url(locationoftheimage);
 }

more here

注意：這樣做會玷汙你的檔案的語義。如果需要，使用 javascript 將 div 注入到真實影像的位置。

第四種方法

你可以試試這個…

<div class="image">

      <img src="" alt="" />

      <h2>Text you want to display over the image</h2>

</div>

CSS

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。