Question

我正在尝试淡化图像作为背景，我想淡出背景图像而不是文本。我想留言留在页面上。这就是我使用的：

请帮帮我。

$(window).scroll(function(){
    $(".top").css("opacity", 1 - $(window).scrollTop() / 250);
  });

/*win.scroll(function(){
  scrollPosition = win.scrollTop();
  scrollRatio = 1 - scrollPosition / 300;
  $(".top").css("opacity", scrollRatio);
*/

/*$(window).scroll(function(){
    var scrollVar = $(window).scrollTop();
    $('.top').css("opacity", 1 - scrollVar/300);
})*/

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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
  <div class="title">Fade Away</div>
</div>

Answer 1

opacity会影响元素中的所有内容，您必须使用background-color代替opacity，因此：

更改：

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

要

$(".top").css('background-color', 'rgba(170,170,170,' + (1 - ($(window).scrollTop() / 250)) + ')');

$(window).scroll(function(){ $(".top").css('background-color', 'rgba(170,170,170,' + (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; color: #000; }

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

注意： 我将color的{{1}}更改为黑色，以便您更好地查看结果。

Answer 2

你需要在.top中添加另一个元素并使其淡出而不是淡化外部容器：

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
  <div class="top-inner"></div>
  <div class="title">Fade Away</div>
</div>

淡出背景图像而不是文本

2 个答案: