文本模糊效果兼容主流浏览器

  一天一个效果让我头疼,就是如何让文本模糊,然后里面的内容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有关

posted @ 2013-11-11 14:55  enggirl  阅读(542)  评论(0编辑  收藏