javascript - 像在 iOS 7 或 Windows 7 中一样创建牛奶玻璃效果

Question

我的网站上有一个标题 block ，它具有纯色背景色和 75% 的不透明度。这个标题 block 有一个固定的位置，如果我向下滚动，这个 block 后面的内容几乎看不到——这是我的意图。但现在我还想模糊标题 block 后面的内容。

我看过这个技术演示:http://codepen.io/Edo_B/pen/cLbrt

基本上它提供了我需要的东西，但最大的缺点是，它只适用于 webkit 浏览器。

我还检查了 blurjs，它只允许我模糊背景图像。

你知道如何解决这个问题吗？

Answer 1

Solution using Canvas Element

我发现解决问题的唯一方法是使用 Canvas 元素渲染图像并模糊所需区域。我正在使用 this library使用起来非常简单。它需要一个 <img>源元素，目标 <canvas>元素和模糊半径。这是所有代码:

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;

如果你不熟悉 Canvas ，你可以看看this cheat