Question

当用户向下滚动时，我正试图淡化标题的新背景。我希望它能够在原始背景上顺利淡入淡出。

相反，正在发生的事情是，它正在删除原始背景，然后淡入新的背景。当用户向下滚动时，这会使转换看起来很难看......

HTML

<div id="navbar" class="navbar">
</div>

CSS

#navbar {
  transition:  background 0.5s ease-in 0s;
}

.navbar {
  background: url("images/nav-bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
  height: 75px;
  margin: 0 auto;
  max-width: 1600px;
  width: 100%;
  position: relative;
  z-index: 1;

}
.navbar.fade-blue {

    background:#566c75;

}

JS

jQuery(document).ready( function() {

jQuery(window).scroll(function() {

    if ( jQuery(window).scrollTop() > 20) {
        jQuery(".navbar").addClass("fade-blue");
    } 

    else {
        jQuery(".navbar").removeClass("fade-blue");
    } 
});
});

编辑：我更改了.fade-blue课，因为我有两个背景规则，我试图将背景图片淡化为一种颜色。

Answer 1

如果你想淡化/淡出你的背景imgae（A）与另一个（B），你需要将它们放在一个单独的div中，并应用于那些不透明度过渡。

如果你只需要fadeOut你的backgorund图像，你只能将它放在父容器内的单独元素上，并应用于不透明度转换。

这是一个例子 How to fade in background image by CSS3 Animation

css过渡背景变化不会顺利淡出

1 个答案: