CSS转换不会缓解

Question

对此有很多问题，但他们都不能帮助我。

我试图缓和进出基于按钮盘旋的背景图像。 Here is the fiddle

HTML: 
<div class="bg bg-home"></div> 
<div class="main-menu" id="home"> 
    <a href="#">Home</a> 
</div> 

JS: 
$('#home').hover(function() { 
    $('.bg.bg-home').addClass('home-main-menu'); 
},function() { 
    $('.bg.bg-home').removeClass('home-main-menu'); 
}); 

CSS: 
html,body { 
    height: 100%; 
} 
.bg { 
    -webkit-transition: all 1s; 
    transition: all 1s; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    opacity: 0; 
} 
.bg-home { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
} 
.home-main-menu { 
    background: url("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/11/1357921737290/Masterclass-in-HTML5-and--006.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    opacity: 1; 
} 

的问题是，背景图像精细减轻，但不缓出。我也试图只做不透明的过渡，但结果相同。

有人可以解释我做错了什么吗？

预先感谢您。

Answer 1

您可以将背景图像切换到.bg-home本身。然后，悬停时添加的课程只需要影响不透明度，您就可以顺利进行缓解。

看到这个小提琴： https://jsfiddle.net/Ltv58jmh/2/

.bg-home { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index: -1; 
    width: 100%; 
    height: 100%; 
    background: url("http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2013/1/11/1357921737290/Masterclass-in-HTML5-and--006.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    opacity:0; 
} 
.home-main-menu { 
    opacity: 1; 
}