滤镜模糊效果

来源：互联网发布：菠萝彩软件下载编辑：程序博客网时间：2024/05/22 05:26

filter滤镜可以制作模糊效果，但是兼容性很不好

那么如何为其他版本的浏览器量身打造模糊效果呢？先看效果图：

情人节要到了，给妹子写几个页面，这是其中一个照片墙的效果，点击一张照片的时候将这个照片放大居中显示，而底下加了一个模糊效果，是不是比一般的遮罩层的单一颜色加opacity要高大上呢！其他细节不说，单说这个模糊效果的class:

.blur {    filter: url(../blur.svg#blur); /* FireFox, Chrome, Opera */        -webkit-filter: blur(10px); /* Chrome, Opera */       -moz-filter: blur(10px);        -ms-filter: blur(10px);                filter: blur(10px);}

这就是模糊效果的类，点击的时候在javascript中让目标DOM节点加上这个className就可以啦。

第一行，这个url指向一个叫blur的svg文件，这是为了兼容低版本的火狐浏览器而写的。blur.svg中的XML代码如下，可以自己用记事本写一下然后改后缀名在FF下实验吭~别懒！

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"     xmlns:ev="http://www.w3.org/2001/xml-events"          baseProfile="full">     <defs>        <filter id="blur">            <feGaussianBlur stdDeviation="10" />        </filter>    </defs></svg>

接着，后面的几行意思很明显，就是多浏览器的filter: blur(偏移量)，高斯模糊的数学原理也不难，这里就不深究啦！话说前几天过年无心学习就玩canvas去了结果又觉着图形图像什么的好好玩~~~

那么除了IE之外，所有浏览器都能通过了，而经过查阅资料，IE10，11用的也是SVG，只不过要写在background-image里(不支持filter:url()的缘故)，更低版本IE写这么一句：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

即可。我没有写到一开始的blur里，因为我遇到的需求没有要求兼容IE(哈哈哈)，就不伺候它了，知道解决方法，到时候要用了就渐进增强~

0 0