jquery - jQuery 应该模糊全屏背景图像

Question

嘿！我需要一些jQuery来使我的全屏背景图像在中间模糊1000 像素（所以：边距：0 自动；宽度：1000 像素；）。

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

我知道这不是一个问题——但我需要一些帮助，因为我的 jQuery（或 JS）知识还不够基本。无论如何，我希望有人可以帮助我。

我将它用于我的全屏背景图片： bg { left: 0; 最小高度：100%；最小宽度：100%；位置：固定；顶部：0；z 指数：-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;
 }

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