强大的css filter属性及色彩名词（附 opacity 属性的兼容写法）

引言

最近公司需要找一个管理项目的工具，然后被推荐了 coding.net，我就看了一下官网的功能介绍。看到合作伙伴那里，hover 之后，图片变了颜色。然后，职业病就犯了，就看了一下人家是怎么实现的。

讲道理，我找了半天是怎么换的颜色。filter 这个属性之前看到是用来兼容 ie 的 opacity 属性的，我也一直没有用过，就以为它就是透明度的属性，我就没勾掉试一试。。。有点愚蠢。我就以为是换了图片的 URL，结果图片的 URL 并没有变化。我查看了图片，它本来的颜色就是彩色的。然后猜测，难道是利用 css 改变了图片的颜色？？？我就挨个属性勾了勾，果然是 filter 的原因。。

默认的 css 属性中，有这么一句 filter: grayscale(100%); ，这就是让图片变灰的属性。然后，就滚去 MDN 了。首屏就是几个例子，我又震惊了！这个属性可以做这么多事！！上一次震惊是在发现了 object-fit 属性，竟然可以改变图片内容的尺寸！

（文档真的要认真看，仔细看，可能某个小括号里边就提供了一种简便方法或者功能介绍。）

本篇主要是摘要了 MDN 的 filter 属性、取值及示例图以及关于色相、饱和度、灰度的概念。末尾附上了一份 opacity 的兼容性写法。

定义

filter：滤镜。

filter CSS属性将模糊或颜色偏移等 图形效果应用于元素 。滤镜通常用于调整图像，背景和边框的渲染。 CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜，通过一个URL链接到SVG滤镜元素(SVG filter element)。

语法

共分为四类。具体的我就不搬运了，下面具体介绍。形式语法

/* 自定义的 SVG 滤镜 */
.filter: url("filters.svg#filter-id")

/* 滤镜函数 */
blur、brightness、contrast、drop-shadow、grayscale、hue-rotate
invert、opacity、saturate、sepia
.filter: blur(5px);

/* 混合滤镜 */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

函数

url: URL函数接受一个XML文件，该文件设置了一个 SVG滤镜 ，且可以包含一个锚点来指定一个具体的滤镜元素.

url()

blur（模糊）: 给图像设置高斯模糊。这个参数可设置css长度值，但不接受百分比值。

<blur()> = blur( <length> )

brightness（亮度）: 给图片应用一种线性乘法，使其看起来 更亮或更暗 。

<brightness()> = brightness( <number-percentage> )

contrast（对比度）: 调整图像的 对比度 。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。

<contrast()> = contrast( [ <number-percentage> ] )

drop-shadow（阴影）: 给图像设置一个 阴影效果 。阴影是合成在图像下面，函数接受<shadow>（在CSS3背景中定义）类型的值，除了“inset”关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

<drop-shadow()> = drop-shadow( <length>{2,3} <color>? )

⚠️注意：这里使用png格式的图片，才可以给图像边缘设置阴影。私以为这个属性是真的强大。请忽略我的龙鸣抠图

grayscale（灰度）: 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值默认是0。

<grayscale()> = grayscale( <number-percentage> )

hue-rotate（色相）: 给图像应用色相旋转。张鑫旭前辈的文章 (ps：这里对于我这种不懂设计的人来说，确实难理解。)

<hue-rotate()> = hue-rotate( <angle> )

invert（反转）: 反转输入图像。或许，你可以尝试一下把值设置为 50%、 40%、 60%，看看会发生什么😆。

<invert()> = invert( <number-percentage> )

（这还是公主殿下对吧😸）

opacity（透明度）: 转化图像的透明程度。

<opacity()> = opacity( [ <number-percentage> ] )

saturate: 转换图像 饱和度 。

<saturate()> = saturate( <number-percentage> )

sepia: 将图像转换为 深褐色 。

<sepia()> = sepia( <number-percentage> )

兼容性

让我们再来看一看 filter 属性的兼容性。

OMG！IE 不支持 filter 属性！那他是怎么处理 opacity 属性兼容的呢？？？于是乎，bing，没找到。就去 MDN 看了opacity 兼容性。

在9.0版本之前，Internet Explore浏览器不支持opacity属性, 它宁愿使用私有滤镜代替。（这就是原因）
IE4 —IE9 支持下面的扩展形式： progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)
IE8引入了与“fliter滤镜”同义的"-ms-filter" 属性。在IE10中不再支持这两个属性。
在 Mozilla 1.7 (Firefox 0.9)版本之前，“-moz-opacity” 属性一直以一种非标准的方式在使用。在Firefox 0.9版本中，这种行为得到了改变，这个属性被重命名为opacity。从那以后，-moz-opacity属性仅作为opacity属性的别名而存在。

附录

下面献上 opacity 属性的兼容写法

from here

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

以上。🧐

定义

语法

函数

兼容性

相关名词

附录