html - 如何在滚动条上淡出图像？

Question

我试图在滚动时淡出图像 - 并在网上查找了一些解决方案，但是，我无法找到一种方法让它与我的代码一起工作。通常，当我尝试时，图像会完全消失，所以我希望在这方面得到一些帮助。

I found a way online that looked quite simple, so I've been trying to get this to work.

.background {
        background-image:url(assets/images/gif/rainspeechpanel.gif);
        background-repeat: no-repeat;
        height: 150%;
        width: 100%;
        position:relative;
        background-size:cover;
        overflow-y: scroll;    
    }
    
    [data-aos="fade"] {
      opacity: 0;
      transition-property: opacity;
    }
    
    [data-aos="fade"].aos-animate {
    }

    <div class="background"; style="centre"; data-aos="fade"; aos-duration="500">
    
        <a href="index.html"><div class="button"><img src="assets/images/buttons/home_rollover_1.png" onmouseover="this.src='assets/images/buttons/home_rollover_2.png'"onmouseout="this.src='assets/images/buttons/home_rollover_1.png'" width="35" height="40">
        </div>
        </a>
    
    </div>

Answer 1

你可以用 Javascript 做到这一点

$(window).scroll(function() {
  $(".top").css("opacity", 1 - $(window).scrollTop() / 250);
});

body {
  margin: 0;
  height: 1000px;
}

.top {
  margin: 0;
  position: relative;
  width: 100%;
  background-color: #aaa;
  height: 300px;
  opacity: 1;
  text-align: center;
  font-family: 'helvetica';
  font-size: 80px;
  font-weight: 100;
  color: #fff;
}

.title {
  position: absolute;
  top: 60%;
  left: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="top">
  <div class="title">Fade Away</div>
</div>