效果图:
提供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