javascript - 我想要 addclass 时背景图像过渡淡入淡出

Question

如果背景是颜色标题固定位置，颜色是淡入淡出，但如果背景是图像，图像不是淡入淡出。

对不起，我不擅长英语，请参阅下面的示例代码。尝试在 CSS 中删除评论背景图像。

$(window).scroll(function() {
  if ($(document).scrollTop() > 0) {
    $('#header').addClass('headtop');
  } else {
    $('#header').removeClass('headtop');
  }
});

#header {
    transition: all 1s ease;
}

.headtop { 
    z-index: 997; 
    position: fixed; 
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 0;
    background-color: #aaaaaa;
    /*background-image: url(https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg);*/
    border-radius: 0px 0px 25px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="header" class="container">
<h1>this is header</h1>
</div>
<div class="container">
<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content

</div>

标签： javascripthtmlcssbackground-image

Answer 1

您可以通过添加带有背景图像的 div 并使用不透明度 0 到 1 的过渡来实现这一点。

这是您的代码示例：

$(window).scroll(function() {
  if ($(document).scrollTop() > 0) {
    $('#header').addClass('headtop');
  } else {
    $('#header').removeClass('headtop');
  }
});

#header {
    transition: all 1s ease;
}

.headtop { 
    z-index: 997; 
    position: fixed; 
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 0;
    background-color: #aaaaaa;
    
    border-radius: 0px 0px 25px 25px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    opacity:1 !important;
}

#header .background {
  z-index: -1;
  position:absolute;
  width:100%;
  height: 69px;
  transition: all 1s ease;
  border-radius: 0px 0px 25px 25px;
  background-image: url(https://cdn.mmaweekly.com/wp-content/uploads/2017/08/WME-IMG-750x370-748x370.jpg);
  top: 0;
  opacity:0;
}

.headtop .background {
  opacity:1 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div id="header">
  <div class="background"></div>
  <h1>this is header</h1>
</div>
<div class="container">
<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content<br>this is  content

</div>