效果图：
提供demo下载：戳这里下载
html代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type"
content="text/html; charset=utf-8"><title>CSS将图片转换成模糊</title><style>.blur { filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */ -webkit-filter: blur(5px); /* Chrome, Opera */ -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false); /* IE6~IE9 */}</style></head><body></body></html> |
需要新建个文件到本地(这里为了兼容FireFox浏览器)
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<?xml version="1.0"
encoding="utf-8"?><svg version="1.1" baseProfile="full"> <defs> <filter id="blur"> <feGaussianBlur stdDeviation="5"
/> //修改这里的5可以改变模糊度 </filter> </defs> <image xlink:href="http://lvhui.org/wp-content/uploads/2013/06/20130622185625.jpg"
filter="url(#blur)"
/></svg> |
注:此效果支持大多浏览器，除ie10,11；如果你执着于这两块鸡大排，可以试试canvas.
地址：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
CSS图片转换成模糊(毛玻璃)效果兼容版,布布扣,bubuko.com
原文：http://www.cnblogs.com/dufengfeng/p/3630879.html
