在網(wǎng)頁設計中，除了文字和圖形元素，還有一種非常重要的元素，就是圖片。如何在圖片上方添加文字呢？這就需要用到CSS技巧了。

.item {
position: relative;
width: 300px;
height: 200px;
margin: 10px;
overflow: hidden;
}
.item img {
width: 100%;
height: auto;
display: block;
}
.item .caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0,0,0,0.7);
color: #fff;
padding: 10px 20px;
box-sizing: border-box;
transition: all 0.3s ease;
}
.item:hover .caption {
bottom: -40px;
}

首先，我們需要給包含圖片的容器元素設置相對定位（position: relative;），這樣才能將文字定位在圖片上方。

其次，我們需要給圖片設置寬度為100%，高度為auto，這樣圖片才能在容器中充滿且不變形，同時將圖片顯示為塊級元素（display: block;），方便定位文字。

接著，我們使用絕對定位（position: absolute;）將文字定位在容器底部，使用bottom: 0;和left: 0;將文字位置定位在容器底部左側，然后設置背景顏色（background-color: rgba(0,0,0,0.7);）和文字顏色（color: #fff;），并給文字添加一些padding（padding: 10px 20px;）和盒模型（box-sizing: border-box;），以免文字位置變形。

最后，我們給文字添加過渡效果（transition: all 0.3s ease;），當鼠標懸停在容器上方時，使用:hover偽類選擇器將文字位置向上移動（bottom: -40px;），創(chuàng)造出一種文字隨鼠標動態(tài)浮現(xiàn)的效果。