I'm trying to blur the content behind a fixed position header so that the content behind it has the user scrolls is blurred when behind this div.
I used to achieve this with simple opacity in CSS but this does not blue the content behind the DIV, merely imposes a translucent panel in front of it.
Is there a simple way even if its a cheat of achieving what I am after. Whether by using a PNG background image or in CSS.
Take a look at the way iOS7 does this http://www.apple.com/ios/ios7/features/.
It's 2015 now, and Apple announced Safari 9, which supports a new CSS feature, the backdrop-filter. Using this CSS rule on your div applies filters to elements behind it only:
#myDiv { backdrop-filter: blur(10px); } 
This feature is currently only available in Safari anyway (and the -webkit prefix is required for it to work), so I don't recommend using it for now. If you do so, be sure to make use of @supports or/and JS to implement fallback for browsers that don't support it yet:
@supports (backdrop-filter: blur(10px)) { #myDiv { background: #181818; } } Here's the compatibility table at caniuse.com, as well as the Chromium and Firefox feature requests.
Learn more about what's new in Safari.
With a little HTML5 and JavaScript magic, the answer is yes:
http://jsfiddle.net/nallenscott/WtQjY/41/
Straw man:
<body> <section> <article> <header></header> <div class="blurheader"></div> <!-- content--> </article> </section> </body> You'll need jQuery, Stackblur, and html2canvas.
- Duplicate the content area and convert it to canvas.
- Move the canvas to the header.
Sync the scroll of the content with the canvas in the header.
html2canvascreates the canvas,Stackblurcreates a gaussian blur on the canvas, and the header element is layered over the.blurheaderdiv to simulate translucency.
If you're comfortable with JavaScript, then this might be worth investigating further. It supports the latest versions of IE, Chrome, Safari, and Firefox and permits graceful fallback options for legacy browsers.
Cheers.
This is really hard. Right now you can't do it the way iOS does, as you can either blur or not blur an element. You can't just blur part of it.
You can use Webkit's blur filter on the other elements, but that's not quite good enough.
A kinda good way to use that is:
*:not(.unblurred) { -webkit-filter: blur(1px); } But this isn't really ideal in almost every case.
CSS Custom Shaders are likely promising, as is perhaps using -moz-element as a background, but right now the answer is basically 'hard luck'.
Try http://iamvdo.me/conf/2012/kiwiparty/#/33 in Firefox (click anywhere) to see the -moz-element effect. It's not bad, but support is limited, and it is very slow.
http://codepen.io/simurai/pen/dFzxL shows a demo that isn't bad, but relies on having a background image that is known ahead of time.
http://webdirections.org/demos/translucency/index.html is another demo, which isn't bad at all. Tutorial is http://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/
No, you still can't blur content underneath something, you need to blur element itself.
The answer you are looking for is in this question Blur Img's & Div's in HTML using CSS
A way to do it without <canvas> is:
- Create a deep clone of the subtree that contains partially blocked elements.
- Blur the clone and position it so it stacks on top of the original subtree.
- Clip the clone to the blocking element.
- Clip the original subtree to areas outside the blocking element (using clip-path).
I'm experimenting with this method here. The code that does it is mostly here.
Some of the drawbacks are:
- If you change the visibility of elements or modify the DOM, you have to update the clones.
- It can make scrolling a little sluggish.
- The clones of partially blocked elements must be styled identically for this to work.
来源：https://stackoverflow.com/questions/17380186/css3-html-5-png-blur-content-behind-element