使用CSS在圖片上面添加文本或者其他元素，可以更好地優(yōu)化頁面布局和設(shè)計效果。下面是使用CSS實現(xiàn)圖片上添加文本的示例。

<div class="img-container">
<img src="example.jpg" alt="Example Image">
<div class="img-text">這是一張圖片的說明文字</div>
</div>

以上示例中，先定義了一個包含圖片和文字的div容器，其中圖片使用img標簽，文字則使用一個div標簽。

接著可以添加CSS樣式，控制文字的位置、字體大小和顏色等屬性。

.img-container {
position: relative;
text-align: center;
}
.img-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 16px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
}

以上樣式中，img-container設(shè)置為相對定位，以便在其中通過絕對定位來控制.img-text的位置。.img-text則設(shè)置絕對定位，并使用top、left和transform屬性使文字位于圖片的中心。此外還設(shè)置了文字的背景顏色、字體大小和顏色等屬性。

通過以上CSS樣式，即可在圖片上方添加文字或其他元素，讓頁面看起來更加美觀和專業(yè)。