CSS中有一種很常用的效果，就是讓字浮在圖片上。這種效果讓頁面看起來更加生動有趣，并且可以有效地引起用戶的注意。接下來，我們就來介紹如何使用CSS實現這種效果。

img {
position: relative;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
p {
position: absolute;
top: 0;
left: 0;
background-color: rgba(255,255,255,0.7);
padding: 5px 10px;
}

首先，我們需要給圖片設置一些基本的樣式。這里我們使用了relative定位和float浮動，讓圖片能夠在頁面中排列，同時也方便我們后面設置文字的位置。margin-right和margin-bottom用來控制圖片之間的間隔。

接下來，我們就要設置文字的樣式了。我們使用了absolute定位，讓文字相對于圖片自由定位。top和left設置為0，這樣文字就會出現在圖片的左上角。background-color設置為半透明的白色，這樣文字不會完全覆蓋住圖片，而是會將圖片的一部分露出來。padding則用來增加文字的空隙，使得整個效果更加美觀。

最后，為了讓文字與圖片更好地融合，我們可以再為p標簽設置一些比較細微的樣式，比如改變字體大小、顏色等，以便能夠更好地適應不同的頁面風格。

總之，使用CSS實現文字浮在圖片上是一種比較常見的效果，可以有效地提升頁面的美觀程度和用戶的使用體驗。只需要掌握一些基本的CSS樣式，就能夠輕松實現這個效果。