文本模糊效果兼容主流浏览器
一天一个效果让我头疼，就是如何让文本模糊，然后里面的内容seo还能搜索到，如果有链接的话，还可以点击。还有最关键的就是要兼容ie6,7，但是经过我一天的努力，只能兼容到ie7.下面就听我慢慢跟你唠叨这里面的东东。
先看一下我们要实现的效果
上面那个是图片，下面红框里面才是我们要实现的效果。
这个东东我用到了几样东西：text-shadow，color，你可能会怀疑这个怎么能出这个效果呢？
大家都知道text-shadow是可以模糊文字的，但是这里color是个什么来路呢？哈，他才是今天的主角。先卖个关子，看代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 <style> 7 div{width:200px;height:200px;border:1px solid #ccc;} 8 .blurry{color:rgba(0,0,0,0);o-text-shadow:0 1px 8px #000;-webkit-text-shadow:0 1px 8px #000;text-shadow:0 1px 8px #000;} 9 .ie10blur{color:#dedede!important;z-index:1;text-shadow:0 1px 8px rgba(34,34,34,0.78)!important;} 10 .ie8blur{filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3);} 11 </style> 12 <script type='text/javascript' src='jquery.min.js'></script> 13 <script> 14 $(function(){ 15 var ver=$.browser.version; 16 var ie=$.browser.msie; 17 if(!ie){ 18 $('div').addClass('blurry'); 19 }else if(ie&&(ver=='10.0')){ 20 $('div').addClass('ie10blur'); 21 }else{ 22 $('div').addClass('ie8blur'); 23 } 24 }); 25 </script> 26 </head> 27 <body> 28 <div> 29 配合BI工程师高效完成智能信息工具的构建及部署工作；通过QlikView商业分析软件，撰写 重要的数据报告；领导数据分析员全力支持销售团队后台数据分析工作，帮助销售更好的售 卖网站产品负责helpdesk（帮助台）IT软件服务系统的工作，对提交的所有Bug报告进行审 核管理部门5位员工的日常工作 30 </div> 31 </body> 32 </html>
大家可以试试，这里color可以这样写，也可以用color：transparent。但是如果不这样写，你还是可以看清楚文本的。我这里之所以不用color：transparent是有原因的。因为一开始我是用的color：transparent的，firefox和chrome是好的，但是IE浏览器从ie10到ie6，整个div都是空白没有内容，我百思不得其解。然后换成rgba()写法就好了。
上面是一点，还有就是IE不支持text-shadow，所以用filter滤镜模拟，filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=3)，加上这个ie7,8,9都OK了。但是ie10不仅还没有效果，div里面的是空白的。 所以我就单独给ie10来了一个近似的字体颜色，这样ie10也好了。很奇怪ie10应该是支持rgba的。这样就模拟出了模糊的效果
最后上效果图：
chrome 
ie10 
ie7,8,9
蓝色的是链接，但是chrome和firefox，ie10是没有颜色的，估计跟他字体透明度为0有关
