在網頁設計中，圖片是不可或缺的元素。然而，有時候我們需要在圖片上面添加文字，來說明圖片的含義或者增加視覺效果。在 CSS 中，我們可以使用以下兩種方法在圖片上添加文字。

方法一：
HTML 代碼：
<div class="container">
<img src="example.jpg" alt="Example">
<span class="caption">這是一幅示例圖片</span>
</div>
CSS 代碼：
.container {
position: relative;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
font-size: 16px;
padding: 10px;
}

在這個例子中，我們通過將容器設置為相對定位，來讓文字等元素相對于圖片進行定位。然后，我們通過設置絕對定位，來將文字框定位到圖片的底部。

方法二：

HTML 代碼：
<figure class="img-container">
<img src="example.jpg" alt="Example">
<figcaption>這是一幅示例圖片</figcaption>
</figure>
CSS 代碼：
.img-container {
position: relative;
}
figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
font-size: 16px;
padding: 10px;
}

這種方法與方法一類似，不同在于我們用 figure 和 figcaption 標簽包裹了圖片和文字。

在以上兩種方法中，我們都用了 position: absolute; 來設置文字的位置。同時，我們也可以修改該屬性的值來改變文字的位置，例如使用 top: 0; 來將文字放置在圖片的頂部。