在CSS中，我們可以使用***定位（absolute positioning）將文字浮于圖片上，這種方法可以讓文字脫離文檔流，固定在圖片所在的位置。

以下是一個簡單的示例，展示如何將文字浮于圖片上：

HTML代碼：

<div class="image-container">
  <img src="image.jpg" alt="背景圖片">
  <div class="text-over-image">文字浮于圖片上</div>
</div>

CSS代碼：

.image-container {
  position: relative; /* ***定位參考點 */
  width: 300px; /* 假設圖片寬度為300像素 */
  height: 200px; /* 假設圖片高度為200像素 */
}
.text-over-image {
  position: absolute; /* ***定位 */
  top: 0; /* 頂部與圖片頂部對齊 */
  left: 0; /* 左側與圖片左側對齊 */
  width: 100%; /* 寬度與圖片寬度相同 */
  height: 100%; /* 高度與圖片高度相同 */
  background-color: rgba(255, 255, 255, 0.5); /* 背景色為白色，半透明 */
  padding: 10px; /* 內(nèi)邊距 */
  box-sizing: border-box; /* 寬度和高度包括內(nèi)邊距和邊框 */
}

在這個示例中，我們創(chuàng)建了一個包含圖片和文字的容器，我們設置容器為相對定位（relative positioning），這樣我們可以將文字***定位在這個容器內(nèi)，我們將文字設置為***定位（absolute positioning），使其脫離文檔流，并固定在圖片的上方，通過調(diào)整top和left屬性，我們可以控制文字與圖片的邊緣距離，我們設置文字背景色為白色，并添加了一些內(nèi)邊距，使其更加美觀。

這種方法可以廣泛應用于各種場景，如新聞稿、產(chǎn)品介紹、廣告等，讓文字與圖片更加緊密地結合。