使用 JavaScript 淡化背景圖片

與淡化背景顏色不同，使用 jQuery 淡化背景圖像並不是一項簡單的任務。這是因為背景圖片不被視為 DOM 中的元素，而是被視為 CSS 屬性。

然而，一個聰明的解決方法是使用具有絕對定位和負 z-index 的 標籤來創建背景圖像的錯覺。透過預設隱藏這些影像並使用 jQuery 淡入淡出，我們可以模擬背景影像淡入淡出的效果。

步驟如下：

1.將 標籤加入您的HTML 中：

為每個要淡入淡出的背景圖像新增一個 標籤。將它們絕對定位並給它們一個負 z 索引，將它們放置在所有其他元素後面：

img {
  position: absolute;
  z-index: -1;
  display: none;
}

2.編寫 jQuery 程式碼：

使用 jQuery 的each() 方法迭代 標籤並按順序淡入和淡出它們。這是一個例子：

function fadeImages() {
  $("img").each(function(index) {
    $(this)
      .hide()
      .delay(3000 * index) // delay each image by 3 seconds
      .fadeIn(3000)
      .fadeOut()
  });
}

3.呼叫函數：

呼叫 fadeImages() 函數來啟動淡入淡出過程。

有關工作範例，請查看 http://jsfiddle.net/ 上的現場演示RyGKV/