在網頁中添加圖片是很常見的需求，但是有時候我們希望圖片和文字聯系更加緊密，這個時候就需要在文字下方加圖片了。

通過CSS實現這個效果，其實也并不難。我們只需要給文字所在的標簽添加一個相對定位，然后再添加一個絕對定位的圖片，讓圖片位置在文字下方即可。
下面是代碼示例：

p {
position: relative;
margin-bottom: 30px;
}
p img {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
}

首先給文字所在的p標簽添加了相對定位，這是為了使得絕對定位的圖片能夠以相對于p標簽定位。然后給圖片添加了絕對定位，bottom屬性設置為負數，表示圖片在下方，left屬性設置為50%為了使圖片能夠水平居中，最后使用transform將圖片向左平移自身寬度的一半。

上面這段代碼其實只是一個基礎的示例，我們還可以通過調整偏移量、大小、文本環繞等方式，實現更加復雜的效果。

還有一點需要注意的是，如果圖片的大小比較大，那么可能會對文字造成影響（比如撐開p標簽等），這個時候我們需要計算好偏移量以及圖片大小，以免影響頁面布局。

在網頁設計中，通過CSS實現文字下方加圖片的效果，可以使得內容更加豐富，排版更加美觀，如果你想要讓你的網頁看起來更加生動，這個技巧一定會對你有幫助。