在網頁設計中，如何將文字精準地排列到圖片下面是一個值得關注的問題。CSS提供了很多方法來實現這一需求。下面我們來一一介紹一些常見的實現方式。
首先是使用position屬性來實現：我們可以通過設置圖片的position屬性為relative，再設置文字的position屬性為absolute，并設置bottom屬性為0，這樣就可以實現將文字緊貼著圖片的底部了。下面是這個方法的CSS代碼：
img {
position: relative;
}
img + p {
position: absolute;
bottom: 0;
}接下來是使用display屬性來實現：我們可以將圖片和文字都包裹在同一個標簽內，并設置這個
的display屬性為flex，再設置justify-content屬性為center，這樣就可以實現將文字水平居中地排列在圖片下面了。下面是這個方法的CSS代碼：
.container {
display: flex;
justify-content: center;
}最后介紹一種比較特別的實現方式：我們可以將背景圖片和文字都設置在同一個元素的background屬性上，并設置background-position屬性為bottom，這樣就可以實現把文字精準地排列在背景圖片的底部了。下面是這個方法的CSS代碼：.container {
background-image: url(圖片路徑);
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
padding-bottom: 50px; // 為保證文字不被背景圖片遮擋，可以設置一定的padding-bottom
}
.container p {
color: #fff; // 如果背景圖片比較深，可以設置文字顏色為白色
text-align: center;
}以上就是利用CSS在圖片下面加上文字的三種常見方法，讀者可以根據具體需求選擇適合的方法進行實現。