Html 修正了向下滚动时被半透明图像覆盖的标题图像

我正在尝试在标题图像上创建一个效果，在向下滚动时该图像将逐渐模糊和褪色。我试图在网上搜索解决方案，但我甚至不知道该怎么称呼它。我发现一个例子非常接近我想要实现的目标，但我也不太明白他们是如何做到的。我的实验彻底失败了，我想知道是否有人能给我指出正确的方向，或者至少让我知道这样的东西可能被称为什么，这样我就可以寻找解决方案。谢谢你抽出时间

示例站点是

（当页面内容到达屏幕顶部时，你会注意到背景图像几乎是黑色的——这就是我想要的）

我在这里加入了一个片段，这样你就可以看到我的惨淡尝试

.header容器{
位置：相对位置；
排名：0；
左：0；
宽度：100vw；
高度：25vh；
溢出：隐藏；
}
.标题图像{
背景图像：url（header image.jpg）；
背景尺寸：封面；
背景重复：无重复；
背景位置：0；
背景附件：固定；
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：1；
}
.标题覆盖{
背景图片：url（headeroverlay.png）；
背景尺寸：封面；
背景重复：无重复；
背景位置：0；
位置：固定；
最高：100%；
左：0；
宽度：100%；
身高：100%；
利润底部：-25vw；
z指数：2；
溢出：隐藏；
}

我不知道纯CSS中是否有解决方案，但您应该尝试使用Javascript创建一个函数，在向下滚动时修改您的

div

样式。

您需要的是。有了这些，你可以模糊图像，添加/删除对比度等等

您提供的链接使用了事先创建的模糊图像。当你在页面顶部时，它的不透明度为0，向下滚动时最大值为1

如果你问我的话，他们的方法不太耗费资源，但不是理想的方法。如果您使用CSS过滤器，您将能够为您想要的每个图像提供相同的效果，而无需在每次使用新的横幅图像时创建模糊的输出副本

使用JavaScript实现效果的方法相当简单。我创建了一个示例来演示这种效果。当然，你可以用这段代码做更多的事情，比如改变色调，去除对比度等等

希望这有帮助