CSS / jquery模糊叠加效果示例

Question

If you take a look at this website, when you scroll down you'll notice that there is some sort of blur overlay effect

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

I had a look at the source code in Chrome but I couldn't find the exact CSS used to achieve this effect. Does anyone have an idea or suggestion on what techniques is used to achieve this effect? I'm planning on using it on a mobile menu.

Thanks

Answer 1

The page you're referencing uses data-* attributes and some Javascript to cleverly switch the background image to a blurred one. This explains why you couldn't find the 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>

Depending on your needs, you may be able to use Filter - Blur :

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

If you clearly layout what you're looking for I may be able to help point you in the right direction.

Also, if you don't need the blur effect and just need something semi-transparent the you can use the opacity ( -ms-filter for old IE) value.

Answer 2

apply blur filter:

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