CSS / jquery模糊叠加效果示例

Question

如果您浏览此网站，向下滚动时会注意到存在某种模糊叠加效果

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

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

谢谢

Answer 1

如果引用数据-使用*属性和一些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>

根据您的需要，您可以使用“ 滤镜 - 模糊” ：

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

如果您清楚地确定要寻找的内容，我可能会帮助您指出正确的方向。

另外，如果您不需要模糊效果而只需要半透明的东西，则可以使用opacity （对于旧IE来说是-ms-filter ）。

Answer 2

应用模糊滤镜：

-webkit-filter: blur(10px); // for chrome
-moz-filter: blur(10px); // for firefox