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. react 学习笔记

    1.Router 1.1 Histories React Router 是建立在 history 之上的.一个 history 知道如何去监听浏览器地址栏的变化, 并解析这个 URL 转化为 loca ...

  2. Python_Day5_迭代器、装饰器、软件开发规范

    本节内容 迭代器&生成器 装饰器 Json & pickle 数据序列化 软件目录结构规范 1.列表生成式,迭代器&生成器 列表生成 >>> a = [i+1 ...

  3. Writing in Science

    学习如何撰写科学论文 一.网站学习:https://www.youtube.com/watch?v=PPsocEFCGRU&list=PLUk4uy2jPpXVGXqVhgs352q6jOdI ...

  4. linux上使用shell脚本查看内存使用率

    如上的内存利用率 = [-/+buffers/cache:used]/[Mem:total ] =  6293404 / 16333656 对于free命令而言,有如下公式: total = used ...

  5. Android实现圆形图片

     情景再现: 写Android程序也有一段时间了,今天突然被问怎么实现一个圆形图片,很多app图像是圆形的.但是用户上传的图像可不是圆的,所以问题就来了,需要我们代码实现圆形图片.但是大脑飞转想到第三 ...

  6. YY前端课程3

    1. 常用的字符实体(html实体):空格=      <=<       >=>       版权符号=© 2. ID就像身份证号一样,是唯一的,html页面的ID不能重复: ...

  7. TranslateAnimation 运行动画后实际位置不正确问题

    最近在调试android 动画时候发现一个很奇怪问题,网上搜索都说TranslateAnimation 动画运行后,实际位置要在动画结束的监听里面重新设置才会正确,不然物体位置还是在原位. 我根据网上 ...

  8. 我的毕业设计——基于安卓和.NET的笔记本电脑远程控制系统

    手机端: 电脑端:    答辩完成后会开放代码.

  9. Linux文件的建立、复制、删除和移动命令

    mkdir命令一.mkdir 命令使用权限 所有用户都可以在终端使用 mkdir 命令在拥有权限的文件夹创建文件夹或目录. 二.mkdir 命令使用格式 格式: mkdir [选项] DirName ...

  10. C# 正则表达式,提取字符串

    Regex.Match(n1,@"blog\.xxxx\.com/(.+)/blog_(\d+)\.html").Result("$2")