在CSS中，我們可以很輕松地為圖片添加文字。這在許多情況下都很有用，例如需要為網(wǎng)站的Banner添加標(biāo)語(yǔ)、為產(chǎn)品頁(yè)面的圖片添加簡(jiǎn)要說(shuō)明等。

要在圖片上方添加文字，我們可以使用CSS中的絕對(duì)定位和z-index屬性。首先，我們需要確保圖片和文字都被包含在一個(gè)相對(duì)定位（position:relative）的容器中。然后，我們將文字容器使用絕對(duì)定位（position:absolute）和z-index屬性移動(dòng)到圖片上方。

以下是一個(gè)例子：

<div class="image-container">
<img src="example.jpg" alt="example image">
<div class="text-container">This is an example text.</div>
</div>
<style>
.image-container {
position: relative;
display: inline-block; /* 確保容器尺寸與圖片相同 */
}
.text-container {
position: absolute;
top: 0;
left: 0;
z-index: 1; /*確保文字在圖片上方*/
padding: 10px;
background-color: rgba(255, 255, 255, 0.7); /* 背景色透明度 */
}
</style>

在這個(gè)例子中，我們首先使用了一個(gè)包含圖片和文字的div容器，該容器被設(shè)置為相對(duì)定位。文字容器使用了絕對(duì)定位，并將其移動(dòng)到圖片的左上角。通過(guò)設(shè)置z-index屬性使其在圖片上方。為了讓文字更易讀，我們還添加了一個(gè)半透明的背景色。

需要注意的是，如果容器的尺寸不與圖片相同，則文字容器的位置和大小可能不正確。因此，最好將容器設(shè)置為display:inline-block，以確保尺寸相同。

在網(wǎng)站設(shè)計(jì)中，文字在圖片上方的應(yīng)用是非常常見(jiàn)的，因此掌握這個(gè)技巧可以讓你更好地掌控網(wǎng)站的排版。