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(哈哈哈),就不伺候它了,知道解决方法,到时候要用了就渐进增强~