<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>html5+css3网页模糊图片效果简单例子-webkfa.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.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);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
</style>
</head>
<body>
<img src="http://star.kuwo.cn/star/userpl2013/63/59/1427257300357_52816163b.jpg"/><br/>
<img src="http://star.kuwo.cn/star/userpl2013/63/59/1427257300357_52816163b.jpg" class="blur"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>html5+css3网页模糊图片效果简单例子-webkfa.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.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);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
</style>
</head>
<body>
<img src="http://star.kuwo.cn/star/userpl2013/63/59/1427257300357_52816163b.jpg"/><br/>
<img src="http://star.kuwo.cn/star/userpl2013/63/59/1427257300357_52816163b.jpg" class="blur"/>
</body>
</html>