Question

我尝试在标题图片上创建一个效果，逐渐模糊并在向下滚动时淡化该图像。我曾尝试在线搜索解决方案，但我甚至不知道该怎么称呼它。我找到了一个非常接近我想要实现的例子，但我也不太了解他们是如何做到的。我的实验完全失败，我想知道是否有人可以指出我正确的方向或至少让我知道这样的事情可能会被调用，以便我可以搜索解决方案。谢谢你的时间。

示例网站为https://www.intertel.co.za/password-grabber

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

我已经在这里添加了一个片段，以便您可以看到我的惨淡尝试

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

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

Answer 2

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

您提供的链接使用预先创建的模糊图像。如果您位于页面顶部，则其opacity为0，当您向下滚动时，该值最多为1。

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

使用JavaScript可以轻松实现这种效果。我创建了Fiddle来证明效果。当然，你可以用这段代码做更多的事情，比如移动色调，去除对比度等等。

希望这有帮助

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

2 个答案: