在網(wǎng)頁設(shè)計中，經(jīng)常需要將文字放在圖片上方，以達(dá)到更好的視覺效果。這種效果可以通過CSS實現(xiàn)。

.img-container {
position: relative;
display: inline-block;
}
.img-container img {
display: block;
}
.img-container p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
margin: 0;
font-size: 16px;
}

首先將圖片所在的容器設(shè)置為相對定位，并將圖片設(shè)置為塊級元素。接著，在容器中添加一個p標(biāo)簽，將其設(shè)置為絕對定位，并且將底部和左側(cè)邊界都設(shè)置為0。設(shè)置p標(biāo)簽的背景色和字體顏色，并調(diào)整padding和margin。最后，將p標(biāo)簽的寬度設(shè)置為100%。

這樣，就可以把文字放在圖片上方，并且自適應(yīng)圖片的寬度。在實際使用中，可以根據(jù)需要調(diào)整顏色、字體等樣式，以達(dá)到最佳的視覺效果。