在網(wǎng)頁設(shè)計(jì)中，常常需要在圖片上放置一些文字，這時(shí)候我們可以使用CSS將文字浮于圖片之上。下面是一個(gè)簡單的例子：

<div class="image-container">
<img src="image.jpg">
<div class="text">這是一張圖片</div>
</div>
<style>
.image-container {
position: relative;
display: inline-block;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>

我們首先創(chuàng)建一個(gè)包含圖片和文字的父容器，然后使用CSS為該容器設(shè)置相對定位（position: relative），這樣子容器內(nèi)的絕對定位（position: absolute）元素就會參照其父容器進(jìn)行定位，而不是參照整個(gè)文檔。

接下來我們?yōu)槲淖衷卦O(shè)置絕對定位，使其相對于父容器垂直居中對齊。具體方法是設(shè)置 top:50% 和 transform:translate(-50%,-50%)，其中 transform 屬性的 translate() 函數(shù)可以使元素相對自身的寬和高進(jìn)行平移。

最后，我們封裝成 .text 類并進(jìn)行樣式設(shè)置。

需要注意的是，當(dāng)圖片大小改變時(shí)，文字的位置也會隨之改變，因此最好設(shè)置圖片大小或使用響應(yīng)性設(shè)計(jì)（例如設(shè)置為百分比寬度）。