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

最新推荐文章于 2024-08-02 06:15:47 发布

diaotun5511

最新推荐文章于 2024-08-02 06:15:47 发布

阅读量92

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/different/p/3412188.html

版权

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

转载于:https://www.cnblogs.com/different/p/3412188.html

diaotun5511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文本模糊效果兼容主流浏览器

　　一天一个效果让我头疼，就是如何让文本模糊，然后里面的内容seo还能搜索到，如果有链接的话，还可以点击。还有最关键的就是要兼容ie6,7，但是经过我一天的努力，只能兼容到ie7.下面就听我慢慢跟你唠叨这里面的东东。　　先看一下我们要实现的效果上面那个是图片，下面红框里面才是我们要实现的效果。　　这个东东我用到了几样东西：text-shadow，color，你可能会怀疑这个怎么能...
复制链接

扫一扫