在網頁設計中，圖片常常被用來裝飾頁面，增強用戶的視覺體驗。但是，有時候我們需要在圖片下方添加一些文字信息，這時候就需要用到CSS實現圖片下加文字的效果。
首先，我們需要在HTML中插入圖片和文字。我們可以用標簽插入圖片，用
標簽插入文字：
<div class="container"> <img src="example.jpg" alt="示例圖片"> <p>這是一張示例圖片</p> </div>
接下來，我們可以用CSS將文字放在圖片下方。首先，要確保容器元素（本例中是一個
標簽）設置了position屬性，并且其子元素（圖片和文字）的position屬性均為absolute：
.container {
position: relative;
}
img, p {
position: absolute;
}此時，圖片和文字會疊在一起，且文字會覆蓋圖片?？梢酝ㄟ^設置z-index屬性來調整它們的覆蓋順序。一般來說，圖片的z-index值應該比文字的大：
img {
z-index: 1;
}
p {
z-index: 2;
}最后，我們需要設置文字在圖片下方的位置。可以通過設置文字的bottom屬性來實現。bottom的值應該為文字的高度加上一定的間距，以免文字和圖片擠在一起。例如：
p {
bottom: 10px;
}這樣，文字就會顯示在圖片的下方了。完整的CSS代碼如下：
.container {
position: relative;
}
img, p {
position: absolute;
}
img {
z-index: 1;
}
p {
z-index: 2;
bottom: 10px;
}通過CSS實現圖片下加文字的效果，可以讓網頁更加美觀和可讀性更高。需要注意的是，在布局時一定要考慮到不同設備和瀏覽器的兼容性。