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

Question

http://blurjs.com

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

所以我尝试了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>

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

任何人都可以帮忙看看我的代码到底出了什么问题吗？我不知道我错过了什么，但我没有得到结果。

Answer 1

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