CSS图片转换成模糊(毛玻璃)效果兼容版

最新推荐文章于 2022-04-25 10:57:38 发布

bangxi2796

最新推荐文章于 2022-04-25 10:57:38 发布

阅读量186

点赞数

原文链接：http://www.cnblogs.com/dufengfeng/p/3630879.html

版权

效果图：

提供demo下载：戳这里下载
html代码如下：

 
         <!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> 
        
         <img src= 
         "http://lvhui.org/wp-content/uploads/2013/06/20130622185625.jpg" 
         /> 
        
         <img src= 
         "http://lvhui.org/wp-content/uploads/2013/06/20130622185625.jpg" 
         class 
         = 
         "blur" 
         /> 
        
         </body> 
        
         </html>

需要新建个文件到本地(这里为了兼容FireFox浏览器)
代码如下：

 
         <?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= 
         "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

转载于:https://www.cnblogs.com/dufengfeng/p/3630879.html

bangxi2796

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS图片转换成模糊(毛玻璃)效果兼容版

效果图：提供demo下载：戳这里下载html代码如下：1234567891011121314151617181920212223<!DOCTYPE HTML><html><head><meta htt...
复制链接

扫一扫