css过渡背景变化不平滑

css transition background change not fading in smoothly

本文关键字：平滑 变化 背景 css      更新时间：2023-09-26

当用户向下滚动时，我试图在页眉的新背景中淡入淡出。我希望它能在原始背景上平滑地淡出。

相反，它正在删除原始背景，然后在新背景中逐渐消失。当用户向下滚动时，这会使转换看起来很难看。。。

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类，因为我在那里有两个背景规则，我正在尝试将背景图像渐变为一种颜色。

如果您想将背景imgae(A(与另一个(B(进行fadeIn/fadeOut，则需要将两者放在一个单独的div中，并将不透明度转换应用于这些。

如果您只需要淡出背景图像，则只能将其放在父容器内的单独元素上，并将不透明度转换应用于该元素。

这里有一个例子如何通过CSS3动画在背景图像中淡入淡出

相关文章：