jQuery应该模糊全屏背景图像

HEJ! 我需要一些jQuery 中间 模糊我的全屏背景 图像 1000px (所以:margin:0 auto; width:1000px;)。

这是一个例子: http : //imageshack.us/a/img443/4976/j7qj.jpg

我知道这不是一个问题 – 但我需要一些帮助,因为我的jQuery(或JS)知识不是基本的。 无论如何,我希望有人可以帮助我。

我正在使用它作为我的全屏背景图像:bg {left:0; 最小高度:100%; 最小宽度:100%; 位置:固定; 顶部:0; z-index:-1; }

您可以使用SVGfilter以及webkit属性,以及针对旧版IE的IE特定filter。 基本上结合了CSS3 + SVGfilter的强大function。 好极了!

示例: http : //jsfiddle.net/3asZC/4/

CSS

#css-filter-blur { margin: 20px; } #css-filter-blur:hover { -webkit-filter: blur(2px); filter: url(#blur-effect-1); } .lt-ie9 #css-filter-blur:hover { filter: progid:DXImageTransform.Microsoft.Blur(Strength=2); position: relative; left: -2px; top: -2px; } 

HTML

     
Blur

对于center元素,编写一个看起来像这样的容器:

 #blurred { max-width: 1000px; width: 100%; background-position: top center; background-image: url; height: auto; margin: 0 auto; } 

最后,您可能需要考虑使用此polyfill以获得最佳浏览器支持。

Interesting Posts