作者：^_^肥仔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 代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta content="width=device-width,user-scalable=no" name="viewport" />

    <link href="/images/web_mini.ico" type="image/x-icon" rel="shortcut icon" />

    <title>CSS3 滤镜实现</title>

    <link href="css/20160110.css" rel="stylesheet" />

</head>

<body>

    <div style="display: table; text-align: center; width: 100%; height: 100%;">

        <div style="display: table-cell; vertical-align: middle;">

            <div class="div_20160110">

                <img src="img/img_20160110.jpg" class="" alt="原图" title="原图" />

                <img src="img/img_20160110.jpg" class="sepia " alt="Speia滤镜" title="Speia滤镜" />

                <img src="img/img_20160110.jpg" class="grayscale " alt="灰度图滤镜" title="灰度图滤镜" />

                <img src="img/img_20160110.jpg" class="blur " alt="高斯模糊滤镜" title="高斯模糊滤镜" />

                <img src="img/img_20160110.jpg" class="invert " alt="反色滤镜" title="反色滤镜" />

                <img src="img/img_20160110.jpg" class="saturate " alt="饱和度滤镜" title="饱和度滤镜" />

                <img src="img/img_20160110.jpg" class="contrast " alt="对比度滤镜" title="对比度滤镜" />

                <img src="img/img_20160110.jpg" class="brightness " alt="亮度滤镜" title="亮度滤镜" />

                <img src="img/img_20160110.jpg" class="hue-rotate " alt="色相旋转滤镜" title="色相旋转滤镜" />

                <img src="img/img_20160110.jpg" class="drop-shadow " alt="阴影滤镜" title="阴影滤镜" />

            </div>

        </div>

    </div>

</body>

</html>

2.CSS 代码

.div_20160110 img {

    max-width: 150px;

    max-height: 150px;

}

.sepia { /**  格式，filer: sepia(效果范围)

     *  效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果

     */

    -webkit-filter: sepia(100%);

    -moz-filter: sepia(100%);

    -o-filter: sepia(100%);

    -ms-filter: sepia(100%);

    filter: sepia(100%);

}

.grayscale { /**  格式，filer: grayscale(效果范围)

     *  效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果

     */

    -webkit-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    filter: grayscale(100%);

}

.blur { /**  格式，filer: blur(模糊半径)

     *  模糊半径，取值范围0~Npx，0为无效果

     */

    -webkit-filter: blur(2px);

    -moz-filter: blur(2px);

    -o-filter: blur(2px);

    -ms-filter: blur(2px);

    filter: blur(2px);

}

.invert { /**  格式，filer: invert(效果范围)

     *  效果范围，取值范围0~1或0~100%，0为无效果，1或100%表示最大效果

     */

    -webkit-filter: invert(1);

    -moz-filter: invert(1);

    -o-filter: invert(1);

    -ms-filter: invert(1);

    filter: invert(1);

}

.saturate { /**  格式，filer: saturate(效果范围)

     *  效果范围，取值范围>=0的数字或百分数，1为无效果，0为灰度图

     */

    -webkit-filter: saturate(2);

    -moz-filter: saturate(2);

    -o-filter: saturate(2);

    -ms-filter: saturate(2);

    filter: saturate(2);

}

.contrast { /**  格式，filer: contrast(效果范围)

     *  效果范围，取值范围>=0的数字或百分数，1为无效果

     */

    -webkit-filter: contrast(2);

    -moz-filter: contrast(2);

    -o-filter: contrast(2);

    -ms-filter: contrast(2);

    filter: contrast(2);

}

.brightness { /**  格式，filer: brightness(效果范围)

     *  效果范围，取值范围>=0的数字或百分数，1为无效果

     */

    -webkit-filter: brightness(2);

    -moz-filter: brightness(2);

    -o-filter: brightness(2);

    -ms-filter: brightness(2);

    filter: brightness(2);

}

.hue-rotate { /**  格式，filer: hue-rotate(效果范围)

     *  效果范围，取值范0deg~365deg，0（默认值）为无效果

     */

    -webkit-filter: hue-rotate(200deg);

    -moz-filter: hue-rotate(200deg);

    -o-filter: hue-rotate(200deg);

    -ms-filter: hue-rotate(200deg);

    filter: hue-rotate(200deg);

}

.drop-shadow { /**  格式，filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)

     *  x-offset和y-offset为阴影的相对于元素左上角的位移距离；

     * 注意：

     *     1. 阴影的外观受border-radius样式的影响；

     *     2. :after和:before等伪元素会继承阴影的效果。

     */

    -webkit-filter: drop-shadow(1px 1px 0px #333);

    -moz-filter: drop-shadow(1px 1px 0px #333);

    -o-filter: drop-shadow(1px 1px 0px #333);

    -ms-filter: drop-shadow(1px 1px 0px #333);

    filter: drop-shadow(1px 1px 0px #333); /*圆角*/

    border: solid 2px #e00;

    -webkit-border-radius: 1px;

}

测试地址：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. lavarel框架中如何使用ajax提交表单

    开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...

  2. php中的常用数组函数（一）（比较多个数组的差集的函数们 array_diff_assoc() array_diff() array_diff_key() array_diff_ukey() array_diff_uassoc()）

    array_diff_assoc($arr1, $arr2, $arr3,... n); 返回:一个$arr1的副本,后续的数组中出现一个键值相同的元素,就在副本中删掉这个元素,最后返回这个副本. 如 ...

  3. Java中的继承

    我们在以前的学习中,我们会了C#中的继承,今天我们来了解了解Java中的继承,其实都大同小异啦! 1.语法 修饰符 SubClass extends SuperClass(){ //类定义部分 } e ...

  4. ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var mysql 启动不了

    ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var mysql 启动不了   ps -A | gr ...

  5. [翻译]:SQL死锁-锁的类型

    很久没有写博客了,这里面的原因有很多.最近的一个项目由于客户明确提出要做下性能压力测试,使用的工具就是VS自带的压力测试工具.以前其它项目做压力测试后反馈的其中一个重要问题就是数据库的死锁.没想到我们 ...

  6. 将 C# 编译为原生机器码

      C# 用户似乎都希望 C# 可以和 C++ 一样编译为本地的机器码.如果 C# 可以编译为机器码,将可以做到: 1. 效率提高,可以取代 C++ . 2. 反编译.   当然微软在商业利益的考虑下 ...

  7. HTML · 图片热点，网页划区，拼接，表单

    图片热点: 规划出图片上的一个区域,可以做出超链接,直接点击图片区域就可以完成跳转的效果. 网页划区: 在一个网页里,规划出一个区域用来展示另一个网页的内容. 网页的拼接: 在一个网络页面内,规划出多 ...

  8. SQL对字符串数组的处理

    一,用临时表作为数组 复制代码代码如下: create function f_split(@c varchar(2000),@split varchar(2)) returns @t table(co ...

  9. GP的使用心得

    在ArcEngine时,GP无疑是GIS开发者的神器.自ArcEngine9.2开始新增一个程序集ESRI.ArcGIS.Geoprocessor,它能调用包含扩展模块在内的所有Geoprocessi ...

  10. Convert part to feature command

    Search 库主页 Related Links ArcObjects SDK for ArcGIS 10Microsoft Help System Documentation Convert par ...