html - 修复了向下滚动时标题图像被半透明图像覆盖的问题

Question

我正在尝试在标题图像上创建一种效果，该效果会在向下滚动时逐渐模糊和淡化该图像。我试图在网上搜索解决方案，但我什至不知道如何调用它。我找到了一个非常接近我想要实现的例子，但我也不太明白他们是如何做到的。我的实验完全失败了，我想知道是否有人可以指出正确的方向，或者至少让我知道这样的东西可能被称为什么，以便我可以寻找解决方案。感谢您的宝贵时间。

示例站点是 https://www.intertel.co.za/password-grabber

(当页面内容到达屏幕顶部时，您会注意到背景图像几乎是黑色的 - 这就是我想要的)

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

.header-container {
position:relative;
top:0;
left:0;
width:100vw;
height:25vh;
overflow:hidden;
}

.header-image {
background-image:url(header-image.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
background-attachment:fixed;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}

.header-overlay {
background-image:url(header-overlay.png);
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
position:fixed;
top:100%;
left:0;
width:100%;
height:100%;
margin-bottom:-25vw;
z-index:2;
overflow:hidden;
}

<div class="header-container">
	<div class="header-image"></div>
	<div class="header-overlay"></div>
</div>

Answer 1

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