filter

最新更新: 2018-08-01 15:37:23 阅读: 32次

语法:

filter:<filter>+

适用于:所有元素

继承性:无

动画性:是

计算值:指定值

取值:

<filter>:要使用的滤镜效果。多个滤镜之间用空格隔开。

说明:

设置或检索对象所应用的滤镜效果。
  • 最常用的滤镜效果是不透明效果,如果要实现50%的不透明度(其它高级浏览器的实现参阅opacity):
elm {
        filter: none | <filter-function > [ <filter-function> ]* 
      }

其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

  1. grayscale灰度
  2. sepia褐色(求专业指点翻译)
  3. saturate饱和度
  4. hue-rotate色相旋转
  5. invert反色
  6. opacity透明度
  7. brightness亮度
  8. contrast对比度
  9. blur模糊
  10. drop-shadow阴影

浏览器的兼容性

目前支持这个属性的浏览器少得可怜,现在只是webkit支持,而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持,所以说,你要是想看到效果就需要下载这两个版本中的一个,我使用的是Google Chrome Canary


一、grayscale灰度

 .grayscale{
          -webkit-filter:grayscale(1);
      }