我想在addclass时使用背景图像转换fadein

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

#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);
} 

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

以下是您的代码示例：

＆＃13;

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;