背景图像在鼠标悬停时闪烁

Question

我试图在鼠标悬停时更改我的背景图像，图像正在更改，但过渡正在闪烁，并且淡入/淡出似乎不起作用……

代码：

css:

.background {
    position: fixed;
    top:100px;
    width: 100%;
    height: 100%;
    background: url(../img/angst.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

js:

$( ".project_link_01" )
  .mouseover(function() {
    $('.background').css('backgroundImage','url(../img/test.png)').fadeIn();
  })
  .mouseout(function() {
    $('.background').css('backgroundImage','url(../img/angst.png)');
});

Answer 1

尝试使用css:hover

.background {
  position: fixed;
  top: 100px;
  width: 100%;
  height: 100%;
  background: url(http://lorempixel.com/50/50/nature) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  transition: background 500ms;
}
.background:hover {
  background: url(http://lorempixel.com/50/50/technics) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<img src="http://lorempixel.com/50/50/technics" style="display:none;" />
<div class="background"></div>

Answer 2

你需要像这样预加载图片：

<img src="test.png" style="display:none">

对于每一个。

或者使用精灵：

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites。