filter这属性貌似可以是img图片在黑白与彩色间转换 filter：grayscale(1)为黑白色，filter：grayscale(0）位彩色，可以用于hover效果 img：hover{filter：grayscale(0)}图片变彩色，兼容问题当前主流浏览器(IE除外)支持，使用前缀，-webkit-filter 、-moz-filter、-ms-filter、-o-filter

大致无语：filter: none | <filter-function > [ <filter-function> ]*

默认为none,不具备继承性，其中filter-function可选值有以下（翻译不是很准，O(∩_∩)O百度的）：

这些值默认大都是100%也就是（1） blur hue-rotate默认值是（0）；

  1. grayscale（灰度）
  2. sepia（这个百度是 乌贼，。。。也有翻译为褐色）
  3. saturate饱和度
  4. hue-rotate色相旋转
  5. invert反色
  6. opacity透明度
  7. brightness亮度（个人感觉这个比较有用，）
  8. contrast对比度
  9. blur模糊
  10. drop-shadow阴影　　

一个非常有意思的css3属性filter的更多相关文章

  1. 关于css3属性filter

    今天看百度百科,看到其中一页所有图片背景全都设置为了灰白色,于是研究了番,发现是应用了filter滤镜这个属性. // 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-fi ...

  2. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  3. 学习笔记：CSS3的filter属性

    CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...

  4. JS判断浏览器是否支持某一个CSS3属性

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...

  5. 判断浏览器是否支持某一个CSS3属性

    判断浏览器是否支持某一个CSS3属性 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpS ...

  6. CSS3的filter用法

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

  7. css3属性 -webkit-filter

    css3属性 -webkit-filter -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错.下面咱们就学习一下filter这个属性吧. 现在规范中支 ...

  8. 如何处理CSS3属性前缀

    今天闲来无聊,重新来说说CSS3前缀的问题.在春节前和@一丝姐姐说起Sass中有关于gradient的mixins.姐姐说: 为什么还要用mixin呢?为什么不使用Autoprefixer?使用Aut ...

  9. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

随机推荐

  1. ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)

    在安装好的MySQL服务器上,配置了环境变量之后,发现用mysql无法登录,报如题的错误,实在没有办法,决定用安全模式对root用户修改密码: 首先关闭正在运行的MySQL; 在一个终端窗口运行命令: ...

  2. JSON API免费接口

    来自:http://www.bejson.com/knownjson/webInterface/ 电商接口 京东获取单个商品价格接口: http://p.3.cn/prices/mgets?skuId ...

  3. SPSS数据分析—对数线性模型

    我们之前讲Logistic回归模型的时候说过,分类数据在使用卡方检验的时候,当分类过多或者每个类别的水平数过多时,单元格会划分的非常细,有可能会导致大量单元格频数很小甚至为0,并且卡方检验虽然可以分析 ...

  4. 实现标记datagridview标题并导出Excel的功能

    最近在学习winform,国庆前被布置了一个小任务,好不容易大致做出来了,决定记录下来,以此加深印象. 先说下需求:这是一个导入话单标记后并导出的功能 1. 选择excel文件 2. 定义字段   日 ...

  5. mysql 查询数据库表结构

    1. mysql> describe tmp_log; +----------+------------------+------+-----+---------+--------------- ...

  6. 面试中常用的__proto__,prototype和原型链，你都了解了吗？

    上一篇随笔主要讲了变量提升的问题,今天我们来讲讲很多前端er在初期很长一段时间内都没有完全搞明白的原型链和构造函数. 1,什么是构造函数 那么要讲到构造函数,必须要有一个函数,所以我们建立一个函数 f ...

  7. vue的选项

    这篇是我自己看着方便整理的,请直接看官方api:http://cn.vuejs.org/v2/api/ 数据 data,props,computed 注意,不应该使用箭头函数来定义计算属性函数 (例如 ...

  8. C#webform LinQ

    LinQ的高级查询: 模糊查 con.Car.Where(r=>r.Name.Contains(cname)).ToList(); 以..开头 con.car.Where(r => r.n ...

  9. 【IE6双倍边距】-IE6双倍边距的bug

    效果 代码 CSS IE6双倍边距的bug body { margin: 0; padding: 0; } .div1 { width: 200px; height: 200px; backgroun ...

  10. C#精髓 第四讲 GridView 72般绝技

    http://blog.csdn.net/21aspnet/article/details/1540301