Creating a milk glass effect like in iOS 7 or Windows 7

Question

I've got a header-block on my website which has a solid background-color with an opacity of 75%. This header-block has a fixed position and if I'm scrolling downwards, the content is barely visible behind this block - this was my intention. But now I additionally want to blur the content right behind the header-block.

I've seen this tech-demo: http://codepen.io/Edo_B/pen/cLbrt

Basically it provides what I need but the huge disadvantage is, that this is only working on webkit browsers.

I've also checked out blurjs which only lets me blur the background-image.

Do you have an idea how to solve this problem?

Answer 1

Solution using Canvas Element

The only way I've found to solve your problem uses a canvas element to render the image and blur the desired area. I'm using this library that's very simple to use. It takes a <img> source element, a target <canvas> element and a blur radius. Here is the all the code:

HTML

<img id="bkg" src="...">
<canvas id="can"></canvas>

CSS

#bkg, #can {position: absolute;}

JS

stackBlurImage('bkg', 'can', 5, false); //the blur
var canvas = document.getElementById('can'),
    ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'destination-in'; //clip
ctx.beginPath();
ctx.arc(300,300,150,0,Math.PI*2,true); //a circle
ctx.fill();
ctx.closePath;

If you are not familiar with canvas you can take a look at this cheat