在網頁設計中，常常需要在圖片上加上文字說明。傳統的做法是使用圖形軟件在圖片上疊加文字，但這種方式缺乏靈活性，當文字需要修改時，還需要重新編輯圖片。下面介紹一種純CSS的方式，在不修改圖片的情況下增加文字說明。

<div class="image-container">
<img src="example.jpg" alt="Example">
<div class="caption">This is an example image</div>
</div>

首先，我們需要將圖片和文字都放在一個容器內。容器可以是一個div或其他塊級元素，這里以div為例。圖片使用img標簽，文字則是一個嵌套在容器中的div元素，它的樣式會在CSS中定義。

.image-container {
position: relative;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.7);
padding: 10px;
text-align: center;
font-size: 1.2em;
font-weight: bold;
}

接下來，我們需要為容器和文字定義樣式。我們將容器的position屬性設為relative，使得文字所在的絕對定位可以相對于容器進行定位。文字的position屬性設為absolute，這樣它可以脫離文檔流，按照需要的位置覆蓋在圖片上。bottom、left、right等屬性用于設定文字的位置，這里我們將文字放在圖片的底部中央。background-color設為半透明白色，padding屬性用于增加文字和背景之間的間距。text-align用于居中文字，font-size和font-weight用于設定文字的大小和粗細。

需要注意的是，文字容易被圖片的色彩和紋理覆蓋，因此需要選擇適合的顏色和字體加粗程度，使得文字在圖片上清晰可見。