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

Question

标题可能有点混乱。

我.main-container格抱着我的整个页面的内容。

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

问题是，褪色时，我想我的里面.main-container内容仍然是可见的，只有有背景图像来实现，而不是整个容器。

我甚至不知道如何解决这个问题。我应该只使用jQuery？ CSS？ classToggle()？​​？我不确定...

我正在使用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。

所以，你希望有一个背景absolute用较低z-index会带来它的内容的其余部分后面的元素中positionning图像元素。

然后使用.hover()可之间的两个图像URL切换。

---

EDIT
下面是一个使用 second example 2个图像，而不是2 URL 1幅图像（避免 白在之间）。

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); 
});