作者：^_^肥仔John      来源：CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

IE特有的滤镜常常作为CSS3各种新特性的降级处理补充，而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性，因此当前仅Webkit内核的浏览器支持CSS3 Filter，而FF和IE10+则需要使用SVG滤镜(svg effects for html)或Canvas作为替代方案处理了，而IE5.5~9则使用IE滤镜、JS+DIV或VML处理！

本篇只做CSS3的滤镜实现，其他具体可以查看来源文章。

CSS3 Filter兼容性表如下：

滤镜实现效果图：

PC显示：

手机显示：

相关代码：

1.HTML 代码

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta content="width=device-width,user-scalable=no" name="viewport" />
  6.     <link href="/images/web_mini.ico" type="image/x-icon" rel="shortcut icon" />
  7.     <title>CSS3 滤镜实现</title>
  8.     <link href="css/20160110.css" rel="stylesheet" />
  9. </head>
  10. <body>
  11.     <div style="display: table; text-align: center; width: 100%; height: 100%;">
  12.         <div style="display: table-cell; vertical-align: middle;">
  13.             <div class="div_20160110">
  14.                 <img src="img/img_20160110.jpg" class="" alt="原图" title="原图" />
  15.                 <img src="img/img_20160110.jpg" class="sepia " alt="Speia滤镜" title="Speia滤镜" />
  16.                 <img src="img/img_20160110.jpg" class="grayscale " alt="灰度图滤镜" title="灰度图滤镜" />
  17.                 <img src="img/img_20160110.jpg" class="blur " alt="高斯模糊滤镜" title="高斯模糊滤镜" />
  18.                 <img src="img/img_20160110.jpg" class="invert " alt="反色滤镜" title="反色滤镜" />
  19.                 <img src="img/img_20160110.jpg" class="saturate " alt="饱和度滤镜" title="饱和度滤镜" />
  20.                 <img src="img/img_20160110.jpg" class="contrast " alt="对比度滤镜" title="对比度滤镜" />
  21.                 <img src="img/img_20160110.jpg" class="brightness " alt="亮度滤镜" title="亮度滤镜" />
  22.                 <img src="img/img_20160110.jpg" class="hue-rotate " alt="色相旋转滤镜" title="色相旋转滤镜" />
  23.                 <img src="img/img_20160110.jpg" class="drop-shadow " alt="阴影滤镜" title="阴影滤镜" />
  24.             </div>
  25.         </div>
  26.     </div>
  27. </body>
  28. </html>

2.CSS 代码

  1. .div_20160110 img {
  2.     max-width: 150px;
  3.     max-height: 150px;
  4. }
  5.  
  6. .sepia { /**  格式，filer: sepia(效果范围)
  7.      *  效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
  8.      */
  9.     -webkit-filter: sepia(100%);
  10.     -moz-filter: sepia(100%);
  11.     -o-filter: sepia(100%);
  12.     -ms-filter: sepia(100%);
  13.     filter: sepia(100%);
  14. }
  15.  
  16. .grayscale { /**  格式，filer: grayscale(效果范围)
  17.      *  效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
  18.      */
  19.     -webkit-filter: grayscale(100%);
  20.     -o-filter: grayscale(100%);
  21.     -moz-filter: grayscale(100%);
  22.     -ms-filter: grayscale(100%);
  23.     filter: grayscale(100%);
  24. }
  25.  
  26. .blur { /**  格式，filer: blur(模糊半径)
  27.      *  模糊半径，取值范围0~Npx，0为无效果
  28.      */
  29.     -webkit-filter: blur(2px);
  30.     -moz-filter: blur(2px);
  31.     -o-filter: blur(2px);
  32.     -ms-filter: blur(2px);
  33.     filter: blur(2px);
  34. }
  35.  
  36. .invert { /**  格式，filer: invert(效果范围)
  37.      *  效果范围，取值范围0~1或0~100%，0为无效果，1或100%表示最大效果
  38.      */
  39.     -webkit-filter: invert(1);
  40.     -moz-filter: invert(1);
  41.     -o-filter: invert(1);
  42.     -ms-filter: invert(1);
  43.     filter: invert(1);
  44. }
  45.  
  46. .saturate { /**  格式，filer: saturate(效果范围)
  47.      *  效果范围，取值范围>=0的数字或百分数，1为无效果，0为灰度图
  48.      */
  49.     -webkit-filter: saturate(2);
  50.     -moz-filter: saturate(2);
  51.     -o-filter: saturate(2);
  52.     -ms-filter: saturate(2);
  53.     filter: saturate(2);
  54. }
  55.  
  56. .contrast { /**  格式，filer: contrast(效果范围)
  57.      *  效果范围，取值范围>=0的数字或百分数，1为无效果
  58.      */
  59.     -webkit-filter: contrast(2);
  60.     -moz-filter: contrast(2);
  61.     -o-filter: contrast(2);
  62.     -ms-filter: contrast(2);
  63.     filter: contrast(2);
  64. }
  65.  
  66. .brightness { /**  格式，filer: brightness(效果范围)
  67.      *  效果范围，取值范围>=0的数字或百分数，1为无效果
  68.      */
  69.     -webkit-filter: brightness(2);
  70.     -moz-filter: brightness(2);
  71.     -o-filter: brightness(2);
  72.     -ms-filter: brightness(2);
  73.     filter: brightness(2);
  74. }
  75.  
  76. .hue-rotate { /**  格式，filer: hue-rotate(效果范围)
  77.      *  效果范围，取值范0deg~365deg，0（默认值）为无效果
  78.      */
  79.     -webkit-filter: hue-rotate(200deg);
  80.     -moz-filter: hue-rotate(200deg);
  81.     -o-filter: hue-rotate(200deg);
  82.     -ms-filter: hue-rotate(200deg);
  83.     filter: hue-rotate(200deg);
  84. }
  85.  
  86. .drop-shadow { /**  格式，filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
  87.      *  x-offset和y-offset为阴影的相对于元素左上角的位移距离；
  88.      * 注意：
  89.      *     1. 阴影的外观受border-radius样式的影响；
  90.      *     2. :after和:before等伪元素会继承阴影的效果。
  91.      */
  92.     -webkit-filter: drop-shadow(1px 1px 0px #333);
  93.     -moz-filter: drop-shadow(1px 1px 0px #333);
  94.     -o-filter: drop-shadow(1px 1px 0px #333);
  95.     -ms-filter: drop-shadow(1px 1px 0px #333);
  96.     filter: drop-shadow(1px 1px 0px #333); /*圆角*/
  97.     border: solid 2px #e00;
  98.     -webkit-border-radius: 1px;
  99. }

测试地址：http://yexiaochao.github.io/demo/page4filter.html

【CSS3】CSS3 滤镜实现的更多相关文章

  1. css3的滤镜模糊的效果

    最近在做一个css3的滤镜模糊的效果,但是我发现,有些浏览器一点效果都没有,这是浏览器兼容性导致的,怕今后会忘记所以就先写下来,也希望可以帮到需要的小伙伴. 代码如下: div{//设置半透明滤镜效果 ...

  2. CSS3的滤镜filter属性

    css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...

  3. 巧用 CSS3 filter(滤镜) 属性

    原文链接:CSS3 filter(滤镜) 属性 效果预览 filter: grayscale(100%); 定义和使用 filter 属性定义了元素(通常是<img>)的可视效果(例如:模 ...

  4. CSS3 grayscale滤镜图片变黑白实例页面

    在网站加入友情链接的LOGO时,因为不同logo颜色的问题,和主题色调可能产生冲突, 我选择用CSS3滤镜让logo变黑白,hover时变回原本的彩色 CSS代码: .gray { -webkit-f ...

  5. CSS3 filter(滤镜)

    filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度). Filter 函数 注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.7 ...

  6. css3 filter(滤镜)属性汇总与使用介绍，来源W3C

    实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(%); /* Chrome, Safari, Opera */ filter: g ...

  7. css3图片滤镜

    http://www.zhanxin.info/development/2012-12-19-css-filter.html

  8. CSS3 filter(滤镜) 属性

    filter 属性定义了元素(通常是<img>)的可视效果 语法: object.style.WebkitFilter="grayscale(100%)" 小栗子: 修 ...

  9. CSS3 grayscale滤镜+SVG使图片变黑白实例页面

    CSS代码: .gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale( ...

  10. CSS3 grayscale滤镜图片变黑白

    1. 使整个页面的图片都变成灰色的,代码如下. html{     font-size: 100%;     -webkit-text-size-adjust: none;    -ms-text-s ...

随机推荐

  1. mysql防止重复插入记录方法总结

    mysql防止重复插入记录方法总结 防止mysql重复插入记录的方法有很多种,常用的是ignore,Replace,ON DUPLICATE KEY UPDATE,当然我们也可以在php中加以判断了. ...

  2. fibonacci数列的和取余（2）

    Maybe ACMers of HIT are always fond of fibonacci numbers, because it is so beautiful. Don't you thin ...

  3. solr 学习片段

    全文检索技术——Solr 1 主要内容 1.站内搜索技术选型 2.什么是solr Solr和lucene的区别 3.solr服务器的安装及配置 Solr整合tomcat Solr的演示 4.维护索引 ...

  4. 利用javascript、php和ajax实现计算器

    计算器和ajax部分: <?php /** * Created by PhpStorm. * User: Administrator * Date: 16-9-2 * Time: 上午9:20 ...

  5. SharpGL学习笔记(十七) 立体文字和平面文字

    在写有关文字的主题前,笔者翻阅了几本书上的相关章节,研究了几天无果. 徐明亮<OpenGL游戏编程>书中介绍的是“位图字体”,也就是把字体栅格化,然后画出来.照着书上的VC代码翻译为C#的 ...

  6. Windows工作集内存

    Windows任务管理器默认情况下,“内存(私人工作集)”列处于选中状态. 私人工作集是工作集的一个子集,它是描述每个进程所使用的内存数量的技术术语.私人工作集专门描述了某个进程正在使用的且无法与其他 ...

  7. Linux初学者指南

    1.为啥我们要学习Linux? 我们干嘛要学习Linux? Linux能给我们带来什么价值呢? Linux给我的感觉就是稳定,免费,性能好. 稳定,体现在哪里?我们使用PC机,安装的操作系统一般是wi ...

  8. python模块基础之json，requeste，xml，configparser，logging，subprocess，shutil。

    1.json模块 json     用于[字符串]和 [python基本数据类型] 间进行转换(可用于不同语言之前转换),json.loads,将字符串转成python的基本数据类型,json.dum ...

  9. [ html canvas globalCompositeOperation ] canvas绘图属性 设置合成图像如何显示 属性演示

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

  10. Hadoop技术内幕(YARN)第4章问题部分答案

    问题1:改写DistributedShell程序,使得每个container运行在不同节点上(目前是随机的,可能运行在任意节点上). 问题2:改写DistributedShell程序,使得某个用户指定 ...