在滚动时到达标题时淡出内容

Question

我有一个标题div，它有文字和透明背景。标题位置固定为150px。 我有内容div出现在标题下面。 我想要做的是淡出内容div的每一行，因为该行从页面顶部到达150px（标题的底部）。
所以它没有显示在标题下面。

这可能吗？

Answer 1

与您聊天后，我已经确定了您的背景，您将使用-webkit-mask-image。 这是一个使用垂直不透明蒙板掩盖页面上所有图像的示例。

img{
  -webkit-mask-image: 
     -webkit-gradient(linear, left top, left bottom, 
       from(rgba(0,0,0,1)), 
       to(rgba(0,0,0,0)));
}

---

您可以使用Gradient PNG使用适当的CSS将其放在页面顶部的全宽处，这会导致伪褪色。

您可能需要稍微调整一些CSS以使其达到您想要的顶部高度，z-index可能对您来说太高了，但这应该可以帮助您顺利开始。

HTML（IMG是您需要创建的150px渐变PNG）;

<div id="topFade">
   <img src="images/fade.png"/>
</div>

CSS

#topFade
{
   width: 100%;
   top: 0;
   position: fixed;
   height: 150px;
   float: left;
   z-index: 9998;
   margin: 0;
   padding: 0;
}
#topFade IMG
{
   width: 100%;
   height: 150px;
   margin: 0;
}

我过去在应用程序中使用过它并运行良好。我在底部，但顶部是相同的。

Answer 2

这是一个非技术性的解决方案 -

使用部分透明的渐变，而不是部分透明的背景。这样，在图像的顶部，背景将是实心的（并且您将无法看到它背后的内容），而在底部，渐变将非常弱且透明，让您仍然可以看到内容

当用户滚动时，这将产生淡出效果。它也会相反，内容逐渐消失。