在 Web 開發中，有時候我們會需要將文字和圖片進行搭配，實現更好的視覺效果。如果想要讓文本靠圖片居上，有多種方式可以實現，其中一種就是通過 CSS 的 background-position 屬性來調整背景圖像的位置。

.example {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center top;
}

在上述代碼中，我們通過選擇器 .example 來設置一個帶有背景圖像的元素，比如 div 或者 p。接著，我們指定了背景圖像的 URL，以及圖像的重復方式（這里我們將其設置為不重復）。然后，我們通過背景圖像的位置來實現讓文本靠圖片居上的效果。具體來說，我們將背景圖像的位置設置為居中頂端。

除了使用 background-position 屬性之外，我們還可以通過其他方式來實現文本靠圖片居上的效果。例如，我們可以使用 display: flex 和 align-items: flex-start 來使文本和圖片對齊，或者使用 CSS Grid 來設置網格布局，從而精確控制文本和圖片的位置。

無論采用哪種方式，確保文本靠圖片居上的效果看起來自然、清晰，并且能夠在不同尺寸和瀏覽器環境下正常顯示。這需要對 CSS 的基礎知識和布局原理有一定的理解，以及對設計感和審美的敏銳度。