jQuery应该模糊全屏背景图像 [英] jQuery should blur fullscreen background image
问题描述
HeJ小鼠!我需要一些 jQuery 模糊我的全屏背景 图片 1000px 中间(所以:margin:0 auto; width:1000px;)。
Hej! I need some jQuery that blurs my fullscreen background image 1000px in the middle (so: margin: 0 auto; width: 1000px;).
这是例如:
http://imageshack.us/a/img443/4976/ j7qj.jpg
我知道这不是一个问题 - 但我需要一些帮助,因为我的jQuery(或JS)知识不是基本知识。
无论如何,我希望有人可以帮助我。
I know that this is less a question - but I need some help, because my jQuery (or JS) knowledge is less than basic. Anyway, I hope someone can help me.
我用这个作为我的全屏背景图片:
bg {left:0;最小高度:100%;最小宽度:100%;位置:固定;顶部:0; z-index:-1; }
I'm using this for my fullscreen background image: bg { left: 0; min-height: 100%; min-width: 100%; position: fixed; top: 0; z-index: -1; }
推荐答案
您可以使用SVG过滤器以及webkit属性,以及针对旧版本的IE特定过滤器IE浏览器。基本上结合了CSS3 + SVG过滤器的强大功能。好极了!
You can use SVG filters, along with the webkit property, as well as a IE-specific filter for older versions of IE. Basically combine the powers of CSS3 + SVG filters. Yay!
示例: 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>
对于中心元素,写一个看起来像这样的容器:
For a center element, write a container that should look something like this:
#blurred {
max-width: 1000px;
width: 100%;
background-position: top center;
background-image: url;
height: auto;
margin: 0 auto;
}
最后,您可能要考虑使用此polyfill 以获得最佳浏览器支持。
Finally, you may want to consider using this polyfill for the best possible browser support.
这篇关于jQuery应该模糊全屏背景图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!