使用blur.js来实现高斯模糊效果 [英] Using blur.js to achieve Gaussian blur effect

问题描述

http://blurjs.com

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

In the website above, the windows create a Gaussian blur effect like looking through frosted glass. I could put any text/image/element behind each of those windows and the blur effect of those things will be seen.

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

So I tried the blur.js plugin itself, but it's simply not working for me:

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>

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

..and what I'm getting as a result is just a blank white coloured website for some reason, not the Gaussian blur effect as intended.

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

Could anyone help to see what is wrong with my code exactly? I don't see how I missed anything out yet I'm not getting the result.

推荐答案

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

You are calling blur.js before jQuery. Blur.js require jQuery to run. It is a jQuery plugin.

这篇关于使用blur.js来实现高斯模糊效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！