CSS是前端開發(fā)中的一項(xiàng)重要技術(shù)，可以通過它對(duì)網(wǎng)頁進(jìn)行色彩、排版和動(dòng)畫等樣式的控制。其中，圖片也是網(wǎng)頁中不可或缺的元素之一。我們常常需要在圖片上添加一些文字來進(jìn)行相關(guān)的說明或者標(biāo)注，那么該如何讓圖片顯示文字呢？其實(shí)通過CSS中的background屬性和設(shè)置圖片的位置，就可以輕松實(shí)現(xiàn)這一需求。

.picture {
width: 400px;
height: 300px;
background: url('example.jpg') no-repeat center center;
position: relative;
}
.picture p {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 10px;
background-color: rgba(0, 0, 0, 0.6);
color: #fff;
text-align: center;
}

上述代碼中，我們通過設(shè)置類名為.picture的元素的背景圖案為example.jpg，并且將圖片位置設(shè)置為居中不平鋪。接著，我們通過position屬性將文本框的定位方式設(shè)置為絕對(duì)定位，便于實(shí)現(xiàn)在圖片的下方添加一段說明文字。這里我們通過bottom和left將文本框定位在圖片的左下角，并設(shè)置文本框的寬度為100%。同時(shí)，我們給文本框設(shè)置了一定的padding和背景色，以便更好的呈現(xiàn)文本信息，text-align則用于居中顯示文本。

通過上述代碼，我們就可以輕松的在網(wǎng)頁中實(shí)現(xiàn)圖片顯示文字了。