css背景图像交叉淡入淡出

Question

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

基本上我的问题是： 有没有人知道如何在更改元素css background-image属性时进行淡入淡出？

Answer 1

我建议两层。

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

我们只会创造一个交叉淡入淡出的错觉。

第一步： 第1层（nivo滑块）淡化新背景。完成淡化后，背景将移至第2层并从第1层移除。用户不会立即看到开关。

第二步： 在下一次转换时，淡出第2层，而第1层则以新背景淡入。完成此操作后，将背景从第1层切换到第2层，将第2层转换为不透明度100％并从第1层移除背景。同样，客户端将看不到视觉开关，因为外观看起来与它们。

冲洗并重复。