在網頁設計中，經常會使用一些特別的效果來增強頁面的視覺效果，其中在圖片上漂浮字體就是一種非常驚艷的效果。在 CSS 中設置字體在圖片上飄動，需要使用一些 CSS 屬性來控制。下面，我們來詳細介紹一下實現方法。

首先，要實現文字在圖片上飄動的效果，我們需要在 HTML 中添加一張背景圖片。然后，為文本添加樣式，使用

position

屬性設置文本的位置，并使用

animation

屬性來控制文本的飄動效果。

.background-img {
background-image: url('your-image-url');
width: 100%;
height: 500px;
}
.content {
position: absolute;
font-size: 3em;
font-weight: bold;
color: #fff;
/* 動畫：從左往有晃動 */
animation: drift 5s ease-in-out infinite alternate-reverse;  
}
/* 動畫實現 */
@keyframes drift {
from {
transform: translateX(-10px);
}
to {
transform: translateX(10px);
}
}

上面的 CSS 代碼中，我們首先定義了背景圖片

.background-img

，并設置其寬度和高度。隨后，我們定義了要飄動的文字樣式

.content

。我們使用了絕對定位的方式將文本放置在背景圖片上，并使用動畫屬性

animation

實現文本在背景圖片上的擺動。

最后，我們定義動畫的細節，即：從左往右晃動的效果。我們使用

@keyframes

定義了動畫的起始位置和結束位置，使用

translateX

屬性來實現文本的橫向移動效果。

這樣，我們就成功地實現了文本在圖片上飄動的效果。你也可以通過調整動畫的時間、速度、方向等參數，來實現更加生動有趣的效果。