如何使用 CSS 將文字精確定位在圖像上？

使用 CSS 在圖片上定位文字

使用 CSS 在圖片上新增文字時，精確對齊可能具有挑戰性。讓我們探索在圖像上有效定位文字的不同方法。

在您的範例中，您在文字元素上使用了position:absolute，這是正確的方法。然而，定位也涉及準確設定 top、left 和 width 屬性。

在您的程式碼中：

.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}

問題在於在 h2 上使用 width: 100% 和 left: 0元素。這會導致文字超出圖像邊界。相反，將寬度設為特定的 px 值，確保其小於影像寬度。

在影像上定位文字的另一個選項是使用 z-index 和position:absolute。這是一個範例：

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}

<div>

使用 z-index，您可以將文字放置在其他元素之上。透過精心設定 top 和 left 屬性，您可以確保文字在圖像上居中。

最後，在使用背景圖片時，請確保 html2pdf 支援此功能。否則，您可能無法獲得所需的輸出。

以上是如何使用 CSS 將文字精確定位在圖像上？的詳細內容。更多資訊請關注PHP中文網其他相關文章！