使用blur.js实现高斯模糊效果答案

【问题标题】：Using blur.js to achieve Gaussian blur effect使用blur.js实现高斯模糊效果
【发布时间】：2014-12-22 01:56:30
【问题描述】：

在上面的网站中，窗户营造出高斯模糊效果，就像透过磨砂玻璃看一样。我可以在每个窗口后面放置任何文本/图像/元素，然后就会看到这些东西的模糊效果。

所以我尝试了 blur.js 插件本身，但它根本不适合我：

CSS：

body {
background-image: url(orangewallpaper.jpg);
}

#bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
background: #FFF;
background-size: cover !important;
}

HTML：

<div id="bg"></div>

<script src="blur.js"></script>
<script src="jquery-1.11.1.js"></script>

<script>
$(document).ready( function() {
$('#bg').blurjs({
    source: 'body',
    radius: 30,
    overlay: 'rgba(0, 0, 0, .2)'
   });
});
</script>

..由于某种原因，我得到的只是一个空白的白色网站，而不是预期的高斯模糊效果。

谁能帮忙看看我的代码到底有什么问题？我不明白我是怎么错过任何东西的，但我没有得到结果。

【问题讨论】：

标签： jquery ios7 overlay blur

【解决方案1】：

您在 jQuery 之前调用 blur.js。 Blur.js 需要 jQuery 才能运行。它是一个 jQuery 插件。

【讨论】：