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