CSS中我們可以很方便地讓文字上浮于圖片之上，這樣可以讓我們的設計更加炫酷，同時也更加易讀。下面我們就來看一下如何使用CSS實現圖片上浮文字的效果。

HTML代碼：

<div class="photo">
<img src="image.jpg" alt="圖片">
<span class="description">這是一段圖片的描述文字</span>
</div>

首先，我們需要將圖片和文字包裹在一個div當中，并且給這個div一個class，比如說叫做“photo”。然后在這個div當中我們分別放上圖片和文字，并分別給它們加上一個class，比如說圖片是“photo-img”，文字是“description”。

CSS代碼：

.photo {
position: relative;
display: inline-block;
}
.photo .description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #ffffff;
padding: 10px;
font-size: 14px;
text-align: center;
}
.photo:hover .description {
display: block;
}

在CSS代碼中，我們首先將圖片所在的div設置為相對定位，并且這個div的display屬性設置為inline-block，這是因為我們希望這個div只占用它實際的寬度，不會占滿整個父容器的寬度，從而使后面的元素也能夠與它并排放置。

接下來，我們在文字所在的span標簽上設置了position:absolute，并且將它的bottom、left、right屬性均設置為0，這樣可以讓文字在圖片的底部展示，并且與圖片的左右兩側貼合。我們還設置了一個半透明的黑色背景和白色文字，使得文字更加顯眼。

最后，我們在.photo:hover .description時，當鼠標經過圖片所在的div時，讓文字的display屬性變為block，這樣文字才會顯示出來。

通過這樣的設置，我們就可以輕松地實現在圖片上浮動的文字效果啦！