jquery - 使用 jquery 或 css 过渡属性在链接悬停时将一个背景图像淡化为另一个

Question

标题可能有点困惑。

我有 .main-container div 来保存我的整个页面内容。

将链接悬停在 #cheffing 上，我需要将 .main-container 的背景图片从一张图片更改为另一张图片，并在两张图片之间淡入淡出。

问题是，在淡入淡出期间，我希望我在 .main-container 中的内容仍然可见，只影响背景图像，而不是整个容器。

我什至不确定如何解决这个问题。我应该只使用 jQuery 吗？ CSS？ 类切换()？ 淡出()？我不确定...

我正在使用 jQuery。抱歉，如果这没有意义。如果您需要更多，我会在附近。

代码笔

https://codepen.io/JDSWebService/pen/NjmrRv

HTML

<div class=".main-container">
  Other Misc Page Content
  <a href="#" id="cheffing">Cheffing</a>
  Other Misc Page Content
</div>

CSS

.main-container {
  height: 100vh;
  background: url("../imgs/background.jpg");
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  transition: background 1s ease-out;
}

Answer 1

您不能为背景制作动画。

这里是 an simple example .

因此，将图像 element 定位在您希望背景为 absolute 且具有较低 z-index 的元素内会带来它在其余内容之后。

然后使用.hover()可以在两个图片URL之间切换。

---

编辑
这是一个 second example在 1 张图片上使用 2 张图片而不是 2 个 URL(以避免 中间的白色)。

HTML:

<div class=".main-container">
  <img id="background-1" src="firstImage.jpg">
  <img id="background-2" src="secondImage.jpg">
  content...

CSS:

.main-container {
  height: 100vh;
  background-size: cover;
  background-position: 0 0;
  background-repeat: no-repeat;
  transition: background 1s ease-out;
}
#background-1,#background-2{
  position:absolute;
  z-index:-1;
  width:100%;
  height:500px;
}
#background-2{
  display:none;
}

jQuery:

var fadeOptions = {
  duration:600,
  easing:"linear"
};

$("#cheffing").hover(function(){
  $("#background-1").fadeOut(fadeOptions);
  $("#background-2").fadeIn(fadeOptions);
},
function(){
  $("#background-2").fadeOut(fadeOptions);
  $("#background-1").fadeIn(fadeOptions);
});