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. weex 小结--内建模块

    使用以下模块时,需要导入依赖:var *** = require('@weex-module/****'); 1. navigator --像浏览器一样切换页面 2. webview(module) ...

  2. nodejs的第四天学习笔记

    一. ECMAScript6(es2015)es6语法 es6/es2015,在es5的基础上扩展了很多新的功能,我们要学习仅仅是es6中的部分常用新功能,这些功能在使用的时候一定要慎重,因为他们之中 ...

  3. Evolutionary Computing: 5. Evolutionary Strategies(2)

    Resource: Introduction to Evolutionary Computing, A.E.Eliben Outline recombination parent selection ...

  4. OpenCV2的Mat矩阵形式自定义初始化

    我们知道,OpenCV2的矩阵形式是Mat,那么Mat矩阵的初始化怎么自定义呢 ?由于比较简单,文字部分我就不多加说明了,见代码,有下面几种: //////////////////////////// ...

  5. 查找数组中重复项的index

    var ary = [5, 4, 4, 2, 7, 8, 33, 2222, 99, 88]; function isRepeat(arr) { var hash = {}; for (var i=0 ...

  6. 手机版web相关meta配置

    若页面需默认用ie兼容内核,增加标签: 若页面需默认用ie标准内核,增加标签: --> 页面标题

  7. u盘文件恢复

    同事的一个u盘,在别的机器上用过之后,插到自己的机器上,被360报警有木马,处理完后,一些文件和文件夹不见了. 拿到我的机器上,360弹出框问要不要处理,列表里显示有几个文件夹被隐藏起来了,选择显示后 ...

  8. 51nod1265 四点共面

    题目链接:51nod 1265 四点共面 四个点构成的三个向量a,b,c共面的充要条件是存在不全为零的实数x,y,z满足x*a+y*b+z*c=0,然后想到线代了.. 其实就是三个向量的混合积为0:( ...

  9. vs2015打包winform程序遇到的一系列问题

    1.因为打包的时候用的是release版本的东西,所以就先把项目按release编译一下,然后一大波bug,后来修改了生成目标平台为x86,我的解决方案里面加上安装部署项目共5个(ui配置:活动rel ...

  10. 超级文件搜索器(SuperSearch)

    写了个工具,各个分享渠道上传太难了,在这里分享给大家吧! 中文名称:超级文件搜索器 英文名称:  SuperSearch 适用对象:硬盘里文件达到数万至数千万级的用户 运行环境:WindowXP,Wi ...