CSS可以幫助我們實現一些有趣的動態效果，例如讓圖片隨著頁面滾動而移動。下面我們來看看如何實現這個效果。

/* 將圖片定位為絕對位置 */
img {
position: absolute;
}
/* 控制圖片距離頁面頂部的距離 */
.img1 {
top: 500px;
}
.img2 {
top: 1000px;
}
/* 使用 JavaScript 監聽頁面滾動事件 */
window.addEventListener('scroll', function() {
/* 獲取滾動的距離 */
var distance = window.scrollY;
/* 根據距離移動圖片的位置 */
document.querySelector('.img1').style.transform = 'translateY(' + distance * 0.6 + 'px)';
document.querySelector('.img2').style.transform = 'translateY(' + distance * 0.8 + 'px)';
});

關鍵在于使用絕對定位將圖片放置在頁面上，并通過控制其頂部距離來調整初始位置。然后，我們可以使用 JavaScript 監聽頁面滾動事件，并根據距離計算出圖片需要移動的距離，并將其應用到圖片上的 transform 屬性中。

通過這個簡單的技巧，我們可以輕松地實現一個讓圖片隨著頁面滾動而移動的效果，為網頁增添一些動態的元素。