在網頁設計中，很常見的一種需求是在圖上添加文字。作為前端開發者，我們可以通過CSS來實現這一需求。以下是使用CSS在圖上添加文字的方法。

<div class="image-with-text">
<img src="path/to/image.jpg">
<div class="text">這里是文字內容</div>
</div>

首先，我們需要創建一個包含圖片和文本的div。為了方便樣式的控制，我們給這個div加上一個class：image-with-text。

接下來，我們在這個div中插入一張圖片。圖片的路徑可以根據實際情況進行調整。在圖片下方，我們添加一個用于放置文本的div，同樣也加上一個class：text。

.image-with-text {
position: relative;
}
.text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.5);
color: #fff;
font-size: 24px;
text-align: center;
padding: 20px;
}

現在，我們來為圖片和文字添加樣式。首先，我們需要設置.image-with-text的position為relative。這是因為我們接下來會為.text設置position:absolute屬性，來實現文字在圖片中的定位。

在.text中，我們將它的position設置為absolute，bottom和left分別為0，這樣它就會顯示在圖片的底部。同時，我們給它設置了一個寬度為100%，這保證了文本的寬度與圖片相同。我們還添加了一個背景顏色為半透明黑色的背景，更好地突出文本。最后，我們設置了文本的字體大小、顏色、對齊方式和內邊距。

現在，我們已經成功地實現了在圖上添加文字的效果。通過CSS，我們可以更加靈活地控制文本的樣式，以適應不同的設計需求。