android 背景磨砂效果,跨浏览器磨砂效果背景图片模糊特效

浅浅的花香味﹌ 2022-10-05 04:59 30阅读 0赞

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;