jQuery的应模糊全屏背景图像[复制](jQuery should blur fullscreen

这个问题已经在这里有一个答案：

• 高斯模糊onHover选项使用jQuery 4个回答

HEJ！ 我需要一些jQuery的是模糊 的 中间我的全屏背景 图片 1000像素 （这样：保证金：0汽车;宽度：1000像素）。

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

我知道，这是少一个问题 - 但我需要一些帮助，因为我的jQuery（或JS）知识小于基础。 无论如何，我希望有人能帮助我。

我用这对我的全屏背景图片：BG {左：0; 最小高度：100％; 最小宽度：100％; 位置是：固定; 顶部：0; 的z-index：-1; }

Answer 1:

您可以使用SVG滤镜，与WebKit的性能，以及旧版本的IE浏览器的IE特有的过滤器一起。 基本上相结合的CSS3 + SVG过滤器的权力。 好极了！

例如： 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

<!--[if lt IE 7]> <div class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <div class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <div class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <div class="no-js"> <!--<![endif]-->
<img id="css-filter-blur" src="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" alt="Blur" height="200" width="300" />

<svg id="svg-image-blur">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="2" />
    </filter>
</svg>

</div>

对于中央元件，写一个容器，它应该是这个样子：

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

最后，你可能要考虑使用该填充工具为最好的浏览器的支持。

文章来源: jQuery should blur fullscreen background image [duplicate]