網(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)候需要在圖片下方加上一段文字描述。實(shí)現(xiàn)這個(gè)效果最簡(jiǎn)單的方法就是使用CSS。

<div class="img-wrap">
<img src="example.jpg">
<p class="caption">這是一個(gè)范例</p>
</div>
.img-wrap {
position: relative;
}
.caption {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 14px;
padding: 10px;
text-align: center;
}

以上代碼是一個(gè)典型的CSS實(shí)現(xiàn)文字在圖片下方的例子。核心就是使用position:absolute將文字的位置固定在圖片下方，同時(shí)使用bottom:0使文字貼著圖片底邊，避免了圖片大小改變后位置不對(duì)的問(wèn)題。

另外，上面的例子中還使用了background-color、color、font-size和padding等屬性來(lái)美化文字的顯示效果。需要注意的是，如果圖片是可變大小的，最好使用max-width:100%限制圖片寬度，避免文字超出圖片區(qū)域。