图片/图形
磨砂效果背景图片模糊jQuery特效
PetitQ
background-blur 是一款非常炫酷的跨浏览器磨砂效果背景图片模糊特效 jQuery 插件。它会抽取图片的主要色彩，并通过 SVG 过滤器来制作模糊效果。并且它还通过 velocity.js 来提供额外的图片切换时淡入淡出的效果。该插件在支持 SVG 的浏览器中使用 SVG 过滤器来制作图片模糊效果（IE 浏览器除外）。在 IE 浏览器中，插件会创建一个<img>标签并在 CSS 中使用 IE 特有的模糊滤镜来模糊图片。
使用方法
<script src="jquery.min.js"></script>
<script src="background-blur.min.js"></script>
也想出现在这里？联系我们吧
HTML 结构
该背景图片模糊特效的基本 HTML 结构如下：
<div class="container">
<div class="content">
...</div>
</div>
CSS 样式
需要为该背景图片模糊特效提供一些基本的 CSS 样式：
.container {
overflow: hidden;
width: 100%;
position: relative;
}.container .bg-blur-overlay {
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjxzdG9wIG9mZnNldD0iNTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(46%, rgba(0, 0, 0, 0.08)), color-stop(59%, rgba(0, 0, 0, 0.08)), color-stop(100%, rgba(0, 0, 0, 0.9)));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
}.container .bg-blur {
z-index: -2;
opacity: 0;
position: absolute;
width: 100%;
min-height: 100%;
height: auto;
display: block;
top: 0;
left: 0;
}.container .content { z-index: 1; }
初始化插件
在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该插件。
$('#some-element').backgroundBlur({
imageURL : 'http://URL-of-the-image',
blurAmount : 50,
imageClass : 'bg-blur'
});
也可以通过下面的方法来创建一张淡入的模糊图片效果。
$('#some-element').backgroundBlur({
imageURL : 'http://URL-of-the-image',
blurAmount : 50,
imageClass : 'bg-blur'
duration: 1000, // If the image needs to be faded in, how long that should take
endOpacity : 1 // Specify the final opacity that the image will have
});
也可以插件一张淡入的模糊图片，然后切换到另一张图片。
// 初始化牧户效果$('#some-element').backgroundBlur({
imageURL : 'http://URL-of-the-image',
blurAmount : 50,
imageClass : 'bg-blur'
duration: 1000, // If the image needs to be faded in, how long that should take
endOpacity : 1 // Specify the final opacity that the image will have
});
//切换图片$('#some-element').backgroundBlur('http://URL-of-another-image');
结合 Velocity.js 来使用，如果你使用 Velocity.js 动画库，那么该插件会自动检测它是否存在，这会提供淡入淡出效果的动画性能，特别是在移动手机设备中。如果没有检测到 Velocity，插件会使用 jQUery 的 animate()方法来制作淡入淡出效果。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
