在網(wǎng)頁設(shè)計(jì)中，經(jīng)常需要在圖片上方顯示文字。通過使用CSS，可以輕松地實(shí)現(xiàn)在圖片上顯示文字的效果。下面是一個簡單的CSS代碼片段，可以實(shí)現(xiàn)文字顯示在圖片上方的效果：

.image-text{
position:relative;
display:inline-block;
}
.image-text img{
display:block;
max-width:100%;
height:auto;
}
.image-text p{
position:absolute;
top:0;
left:0;
color:#fff;
background-color:rgba(0,0,0,0.5);
padding:5px;
margin:0;
font-size:14px;
}

首先，我們給包含圖片和文字的容器（.image-text）設(shè)置相對定位（position:relative），這樣就可以在容器中絕對定位（position:absolute）文字。接著，我們?yōu)閳D片設(shè)置了塊級元素（display:block），然后設(shè)置圖片的最大寬度為100%，以確保圖片能夠適應(yīng)其容器的大小。我們還將文本的背景顏色設(shè)置為半透明黑色（background-color:rgba(0,0,0,0.5)），這樣就可以使文本更加易讀。

通過這些CSS屬性的設(shè)置，我們成功地實(shí)現(xiàn)了在圖片上顯示文字的效果。您可以在需要顯示圖片和文字的位置添加一個div元素，并將其類名設(shè)置為.image-text，然后在該div元素中添加圖片和p元素，p元素中包含要顯示的文本即可。