background-blur是一款非常炫酷的跨瀏覽器磨砂效果背景圖片模糊特效jQuery插件。它會抽取圖片的主要色彩，并通過SVG過濾器來制作模糊效果。并且它還通過velocity.js來提供額外的圖片切換時淡入淡出的效果。

該插件在支持SVG的瀏覽器中使用SVG過濾器來制作圖片模糊效果(IE瀏覽器除外)。在IE瀏覽器中，插件會創建一個標簽并在CSS中使用IE特有的模糊濾鏡來模糊圖片。

安裝

可以通過bower來安裝該背景圖片模糊特效插件。

bower install background-blur

或者下載壓縮包，在頁面中引入下面的文件。

使用方法

HTML結構

該背景圖片模糊特效的基本HTML結構如下：

...

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()方法來制作淡入淡出效果。

瀏覽器兼容

Chrome

Firefox

Safari and Safari Mobile (iOS)

IE6, IE7, IE9, IE10, IE11

Android browsers

總結

以上是生活随笔為你收集整理的android 背景磨砂效果,跨浏览器磨砂效果背景图片模糊特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。