Question

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

我查看了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（旧版IE的-ms-filter）值。

Answer 2

应用模糊过滤器：

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

CSS / jquery模糊叠加效果示例

2 个答案: