網(wǎng)頁設(shè)計中，有時需要在文字下方添加圖片以增強(qiáng)視覺效果，但若沒有較好的處理，在不同的設(shè)備屏幕上呈現(xiàn)的效果可能不盡相同。下面介紹文字放圖片正下方的CSS實(shí)現(xiàn)方法，讓圖文排版更加美觀。

/* 定義圖片樣式 */
img {
display: block; /* 使圖片獨(dú)占一行 */
width: 100%; /* 使圖片寬度適應(yīng)父容器 */
margin-bottom: 0.5rem; /* 給圖片下方留出一定的間隔 */
}
/* 定義圖片所在容器 */
.image-container {
position: relative; /* 使容器位置相對于父容器固定 */
overflow: hidden; /* 隱藏容器溢出的部分 */
}
/* 定義文字樣式 */
p {
margin: 0; /* 去掉段落頂部和底部的默認(rèn)間距 */
padding: 0.5rem; /* 給段落左右留出一定的空間 */
}
/* 定義文字插入圖片樣式 */
p img {
position: absolute; /* 圖片位置相對于其容器固定 */
bottom: 0; /* 圖片距離容器底部0px */
left: 0; /* 圖片距離容器左側(cè)0px */
transform: translateY(100%); /* 圖片位置向下移動容器自身高度的距離 */
}

以上是文字放圖片正下方的CSS樣式的基本設(shè)置，其中需要注意幾點(diǎn)：

1. 圖片和文字需要分別放在不同的容器內(nèi)，圖片容器需要相對于其父容器固定位置；

2. 圖片需要獨(dú)占一行，即讓圖片展示為塊級元素；

3. 文字應(yīng)該設(shè)置一定的padding，避免與圖片緊貼在一起，不美觀；

4. 對于移動端設(shè)備，可能需要添加特定的CSS媒體查詢，使排版更加美觀。

總之，利用CSS對文字放置圖片進(jìn)行美化顯示，需要對不同的設(shè)備、屏幕大小和分辨率考慮充分，以達(dá)到更佳的視覺效果。