我设法使过渡平滑，方法是只给大屏幕线性渐变背景，并使用绝对定位的子元素，在不透明度上进行过渡。诀窍是在改变图像和淡入之前淡出背景。
第一个

我在之后（或之前）使用伪元素做了类似的事情。我的实现是在React中使用样式化组件。
我试着用vanilla js创建同样的。我希望它能有所帮助。
https://codesandbox.io/s/determined-ramanujan-z70egr
本质上我是在添加和删除一个css规则（pseudo element before），在这里我运行了一个背景大小的过渡。我没有使用不透明度，因为我认为最初的问题与过渡背景图像有关。但我认为这些解决方案看起来更好，因为你不必触及CSS规则。
第一个
当你运行这个代码片段时，至少在我看来，图片在第一次加载时会 Flink 。

如果您希望在两个背景图像之间进行过渡，我建议对背景图像使用::before和::after伪元素，然后更改其中一个图像的不透明度。
我想如果我分步骤显示这些变化会更容易一些。下面的代码与您的代码具有相同的行为，其中我只设置了--background-image。
我需要指出的是，除非你知道你在做什么，否则永远不要使用float和position: absolute，因为这只会把页面流搞得一团糟。我相应地更新（删除）了CSS。而且，Bootstrap是最糟糕的，因为你最终会试图覆盖Bootstrap试图实现的任何东西，就像你的CSS代码在你的代码片段中所做的那样。
第一个
因此，如果我对上面的代码进行扩展，我会将旧的可见图像设置为前景图像（::before），然后将其不透明度设置为0，以淡出到背景图像中设置的新图像（::after）。
我还在代码中设置了动画速度，所以如果你想改变某些值，只改变一个值比在CSS和javascript之间跳来跳去要容易得多。
作为奖励，我还增加了下一个图像的预加载。你不想过渡到一个还没有加载的图像。
第一个