在CSS中，將文字疊加在圖片上是一個常見的需求，要實現(xiàn)這一功能，可以使用CSS的定位屬性和文本樣式屬性，以下是一個簡單的示例，展示如何將文字疊加在圖片上：

你需要在HTML中創(chuàng)建一個包含圖片和文字的元素，可以使用div元素來包裹圖片和文字，并設(shè)置相應的類名或ID。

<div class="image-with-text">
  <img src="path-to-your-image.jpg" alt="描述圖片的文字">
  <div class="text-overlay">這是疊加在圖片上的文字</div>
</div>

在CSS中設(shè)置樣式，使文字能夠疊加在圖片上：

.image-with-text {
  position: relative; /* 創(chuàng)建一個新的堆疊上下文 */
  width: 300px; /* 假設(shè)圖片寬度為300像素 */
  height: 200px; /* 假設(shè)圖片高度為200像素 */
}
.image-with-text img {
  width: 100%; /* 使圖片填充整個容器 */
  height: 100%; /* 使圖片填充整個容器 */
}
.text-overlay {
  position: absolute; /* 使用***定位將文字疊加在圖片上 */
  top: 0; /* 文字的頂部與圖片的頂部對齊 */
  left: 0; /* 文字的左側(cè)與圖片的左側(cè)對齊 */
  width: 100%; /* 文字寬度與圖片寬度相同 */
  height: 100%; /* 文字高度與圖片高度相同 */
  background-color: rgba(255, 255, 255, 0.5); /* 設(shè)置背景色為半透明白色 */
  padding: 10px; /* 添加一些內(nèi)邊距 */
  box-sizing: border-box; /* 確保盒模型正確計算 */
}

在這個示例中，.image-with-text元素使用position: relative;來創(chuàng)建一個新的堆疊上下文，這樣其內(nèi)部的***定位元素（即.text-overlay）可以相對于它進行定位。.text-overlay元素使用position: absolute;來使其脫離文檔流，并可以覆蓋在圖片上，通過調(diào)整top、left、width和height屬性，可以***控制文字在圖片上的位置，還設(shè)置了背景色和內(nèi)邊距以增強可讀性。

這種方法可以靈活控制文字在圖片上的位置和樣式，適用于多種場景，你可以根據(jù)自己的需求調(diào)整樣式屬性，如字體大小、顏色等。