css 背景图像交叉淡入淡出

Question

我正在开发一个使用 nivo-slider 插件的网站。滑块中的图像交叉淡入淡出很好，但我想添加一个背景图像重复图案，并将该交叉淡入淡出到另一个图像图案。我受到限制，因为我无法弄清楚如何在不破坏插件的情况下将这些背景图像添加为 html，所以我使用 css 中的 background-image 属性来更改背景，但它不会褪色，新背景只会出现。使用 css 过渡不适用于 css 背景图像，并且当我使用 jquery .animate 或 jquery 淡入淡出时它不起作用。我最接近的是淡出然后进入，但这不是我想要的交叉淡入淡出。我也找不到任何javascript插件来做到这一点。

所以基本上我的问题是： 有谁知道在更改元素 css background-image 属性时如何交叉淡入淡出？

Answer 1

我建议两层。

1. Nivo 滑块
2. 相邻的“助手”div

我们只会创建交叉淡入淡出的错觉。

第一步： 第 1 层（nivo 滑块）淡入新背景。淡入完成后，背景将移至第 2 层并从第 1 层移除。用户不会看到开关，因为它是瞬时的。

第二步： 在下一个过渡中，将第 2 层淡出，而第 1 层淡入新背景。完成此操作后，将背景从第 1 层切换到第 2 层，将第 2 层变为不透明度 100% 并从第 1 层移除背景。同样，客户端将看不到视觉切换，因为外观看起来与他们。

冲洗并重复。