CSS 是一種強大的前端語言，可以用于修改網站中的很多元素，包括圖片。在 CSS 中，可以使用 background-image 屬性來修改圖片。然而，如果我們想實時修改圖片，即在用戶與網站交互時動態更改圖片，就需要使用 JavaScript 來完成。

為了實現這個效果，我們首先要在 HTML 中創建一個包含圖片的元素，比如 div，然后在 CSS 中設置背景圖像，例如：

div {
background-image: url("default-image.png");
}

在 JavaScript 中，我們可以通過將圖片的 URL 存儲在變量中，然后使用 CSS 屬性來更新圖片。我們可以通過以下方式獲取元素：

var element = document.getElementById("my-element");

然后，我們可以使用以下代碼來更改背景圖像：

element.style.backgroundImage = "url('new-image.png')";

通過使用這些代碼，我們可以實現實時更改圖片的效果。例如，我們可以在用戶與頁面元素交互時更改背景圖像：

element.addEventListener("click", function() {
element.style.backgroundImage = "url('clicked-image.png')";
});

在這個例子中，當用戶單擊元素時，JavaScript 將更新元素的背景圖像。通過使用 CSS 和 JavaScript，我們可以輕松地實現實時更改圖片的效果，增強用戶體驗并使網站更加動態。