JS代码实现图片的模糊效果

2012/11/7 18:53:27作者：佚名来源：网络

移动端

【实例名称】

JS代码实现图片的模糊效果

【实例描述】

很多网站中图片的模糊效果使用Photoshop完成，其实CSS同样提供了实现模糊效果的虑镜。本例学习如何实现图片的模糊效果。

【实例代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>无标题页-学无忧（www.xue51.com）</title>
</head>
<body>
    <p><font face="Arial" color="#008080">
    <div><p align="center">
    <img  style="filter:blur(add=0,direction=45,strength=10)"
 src="logo1.gif" width="160" height="103"> </p>
    </div>
    </font>
    <p align="center">这是图片的模糊效果</p></font>
</body>
</html>

 
【运行效果】

图片的模糊效果运行效果