在網頁設計中，圖片是非常重要的元素之一。而為了讓圖片更具互動性和信息性，常常會在圖片后面添加文字說明。那么如何讓這些文字跟圖片位置緊密、樣式協調？這時候就需要使用CSS了。以下是一些簡單的CSS代碼，可以讓你輕松實現這個效果。
首先，我們需要使用
標簽包裹圖片和文字。我們可以使用CSS為
標簽設置position屬性為relative，這樣圖片和文字就可以相對于
標簽的位置進行定位。 接著，我們可以給圖片添加一個絕對定位，使用CSS的left和top屬性來精確定位。這些值可以根據具體情況自行調整。
p {
position: relative;
}
img {
position: absolute;
left: 0px;
top: 0px;
}最后，我們可以添加一個絕對定位的標簽，用于顯示文字。同樣使用CSS的left和top屬性來調整位置。為了讓文字更協調，我們還可以添加一些自己喜歡的樣式，比如字體、顏色等。
p {
position: relative;
}
img {
position: absolute;
left: 0px;
top: 0px;
}
div {
position: absolute;
left: 0px;
top: 100px;
font-size: 20px;
color: #333;
}通過以上的CSS代碼，我們就可以輕松達到讓圖片和文字位置緊密、樣式協調的效果。祝大家在網頁設計中取得更好的效果！上一篇圖片發亮css