在Web頁面設計中，我們經常需要將文本內容放在圖片上，并實現文字懸浮在圖片上的效果。這種效果可以給頁面增加一些趣味和美感，同時也能夠方便地傳遞信息。下面我們來看看如何使用CSS實現文字懸浮在圖片上。

/*設置圖片位置和尺寸*/
.container {
position: relative;
width: 400px;
height: 300px;
margin: 0 auto;
}
/*設置圖片透明度*/
.container img {
opacity: 0.5;
}
/*設置文字樣式和位置*/
.container p {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
font-size: 30px;
font-weight: bold;
}

首先，我們需要將圖片的容器設置為相對定位(position: relative)，這樣可以保證圖片和文字的位置關系。然后設置圖片大小和位置，這里以400px寬、300px高的圖片為例，并設置圖片的透明度為0.5(opacity: 0.5)。

接著，我們需要在容器內添加一個p標簽，并設置其樣式和位置。首先，將p標簽設置為絕對定位(position: absolute)，然后將其上下左右位置設置到圖片的中心點，這里使用transform來定位。最后，設置文字顏色、字體、大小和粗細等樣式。

通過以上CSS代碼，我們就實現了文字懸浮在圖片上的效果，可以嘗試將自己的文本內容和圖片放入.container容器中查看效果。