在CSS中，我們可以使用***定位（absolute positioning）或者相對(duì)定位（relative positioning）來實(shí)現(xiàn)文字在圖片中的顯示。

我們需要?jiǎng)?chuàng)建一個(gè)包含圖片和文字的HTML結(jié)構(gòu)，圖片作為背景圖像，文字則作為前景文本。

HTML結(jié)構(gòu)如下：

<div class="image-with-text">
  <img src="path-to-your-image.jpg" alt="Background Image">
  <p class="text-on-image">Your Text Here</p>
</div>

我們可以使用CSS來定位文本，以下是使用***定位的例子：

.image-with-text {
  position: relative; /* 相對(duì)于其***近的定位祖先元素（如果有）進(jìn)行定位 */
  width: 300px; /* 假設(shè)圖片寬度為300px */
  height: 200px; /* 假設(shè)圖片高度為200px */
}
.text-on-image {
  position: absolute; /* 相對(duì)于其***近的定位祖先元素（如果有）進(jìn)行定位 */
  top: 50px; /* 文本距離圖片頂部的距離 */
  left: 100px; /* 文本距離圖片左邊的距離 */
  color: #ffffff; /* 文本顏色 */
  font-size: 24px; /* 文本大小 */
}

在這個(gè)例子中，文本會(huì)被定位在圖片中的指定位置，你可以根據(jù)需要調(diào)整top、left、color和font-size等屬性來控制文本的顯示位置和樣式。

如果你想要讓文本始終保持在圖片的中心位置，可以使用以下CSS：

.image-with-text {
  position: relative; /* 相對(duì)于其***近的定位祖先元素（如果有）進(jìn)行定位 */
  width: 300px; /* 假設(shè)圖片寬度為300px */
  height: 200px; /* 假設(shè)圖片高度為200px */
}
.text-on-image {
  position: absolute; /* 相對(duì)于其***近的定位祖先元素（如果有）進(jìn)行定位 */
  top: 50%; /* 將文本垂直居中 */
  left: 50%; /* 將文本水平居中 */
  transform: translate(-50%, -50%); /* 將文本位置調(diào)整為相對(duì)于其容器的中心 */
  color: #ffffff; /* 文本顏色 */
  font-size: 24px; /* 文本大小 */
}

在這個(gè)例子中，文本會(huì)被定位在圖片的中心位置，無論圖片的大小如何變化，通過top和left屬性設(shè)置為50%，并將transform屬性設(shè)置為translate(-50%, -50%)，我們可以確保文本始終保持在圖片的中心位置。