javascript - CSS/jquery模糊叠加效果示例

Question

如果你看一下这个网站，当你向下滚动时你会注意到有某种模糊叠加效果

https://medium.com/war-is-boring

我查看了 Chrome 中的源代码，但找不到用于实现此效果的确切 CSS。有没有人对使用什么技术来实现这种效果有想法或建议？我打算在移动菜单上使用它。

谢谢

Answer 1

您引用的页面使用 data-* 属性和一些 Javascript 巧妙地将背景图像切换为模糊图像。这解释了为什么找不到 CSS:

<div class="image-full-bleed is-usingCanvas" data-scroll="blur-cover" data-image-url="https://d262ilb51hltx0.cloudfront.net/fit/c/1200/960/gradv/29/81/60/darken/25/1*fDLP8pfTZX3cAQB0J6a72g.jpeg" data-image-blur-url="https://d262ilb51hltx0.cloudfront.net/fit/c/1200/960/gradv/29/81/40/darken/50/blur/50/1*fDLP8pfTZX3cAQB0J6a72g.jpeg"><div class="image-src picker-target" style="background-image: url('https://d262ilb51hltx0.cloudfront.net/fit/c/1200/960/gradv/29/81/60/darken/25/1*fDLP8pfTZX3cAQB0J6a72g.jpeg')"></div></div>

根据您的需要，您可以使用 Filter - Blur :

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

如果您清楚地规划了您要查找的内容，我或许可以帮助您指明正确的方向。

此外，如果您不需要模糊效果而只需要半透明的东西，您可以使用opacity(-ms-filter for old IE)值(value)。