使用 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/