创建牛奶杯效果,如iOS 7或Windows 7

Question

我的网站上有一个标题块,它有一个坚实的背景色,不透明度为75%.这个标题块有一个固定的位置,如果我向下滚动,内容在这个块后面几乎看不到 - 这是我的意图.但现在我还想模糊标题块后面的内容.

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

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

我还检查了blurjs,它只能让我模糊背景图像.

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

Answer 1

使用 Canvas 元素的解决方案

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

超文本标记语言

<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，你可以看看这个秘籍