CSS3 Filter

需要说明的是，这是一篇译文，原文地址 .

Image Adjustment with CSS Filter Effects

---

调整图片的亮度和对比度，或者将图片变成灰色或棕褐色是一种在图片编辑软件中常见的行为， 比如说 Photoshop. 但是现在已经可以利用 CSS 给网页上的图片添加相同的特性。

而这种能力来源于 Filter Effects， 实际上这是一种还处在草案阶段的特性 。 但是，webkit 浏览器似乎要起头去实现这么一个特性。

所以，让我们来尝试一下而且我将使用一张图片去展示效果。

The Effects

---

使用这些效果其实是非常简单的，看下面给出的一段代码，目的是将图片变成灰色。

    img {
        -webkit-filter: grayscale(100%);
    }

demo01.png

下面是为了将图片转换成棕褐色

    img {
        -webkit-filter: sepia(100%);
    }

demo02.png

grayscale 和 sepia 的值都是以百分比的格式表示的，100% 是最大值，如果使用的是 0% ，那么图片将保持不变，而且如果不明确指定它们的值，它们会将 100% 视为默认值。

为图像设置亮度是十分有必要的，而且我们确实可以通过 brightness 去做到，就像下面这样。

    img {
        -webkit-filter: brightness(50%);
    }

demo03.png

brightness 的行为和之前介绍的 sepia 和 grayscale 有所不同，因为 sepia, grayscale 将值设置为 0%， 将会保持原图不变，而 brightness 以 100% 为基准点，也就是说 100% 以下，图片会变暗，而 100% 以上图片会变暗，而且值可以为负，不过这个时候只是黑色一片，完全看不出图片内容了。

而且我们可以用这种方式调整图片的对比度。

    img {
        -webkit-filter: contrast(200%);
    }

demo04.png

同样，对比度的设置和亮度的设置是类似的，以 100% 为基准点，100% 以下为低对比，100% 以上为高对比度。

另外，我们还可以在一行声明中组合使用多个效果，就像下面这个例子。我们设置图片的灰度，与此同时提高图片 50% 的对比度。

    img {
        -webkit-filter: grayscale(100%) contrast(150%);
    }

demo05.png

通过结合 filter 和 CSS3 中的 transition 我们可以做出一些优美的 hover 效果。

    img:hover {
      -webkit-filter: grayscale(0%);
    }
    img:hover {
      -webkit-filter: sepia(0%); 
    }
    img:hover {
      -webkit-filter: brightness(0%); 
    }
    img:hover {
      -webkit-filter: contrast(100%); 
    }

最后，还有一个属性我们可以尝试，那就是高斯模糊，通过它我们可以将一个目标元素变得模糊。

        img {
            -webkit-filter: blur(5px);
        }

demo06.png

就像在 Photoshop 中，模糊度的值以像素半径表示，而且如果你不明确指定这个值，它默认为 0， 图片将保持原样。

Final Thought

---

其实还有一些其它的效果，比如说 hue-rotate, invert 和 saturate， 但是我认为它们在真正的网页情景中很少使用。因此，我们的介绍将只包含上述的四种效果。

尽管我们这篇文章所介绍的图片都是应用在图片上的，但在实际上这些属性可以应用在 DOM 中的任何元素上。

---

在翻译之前，我去查看了一下 Filter 在各个浏览器中的支持情况，发现这一属性已经被各大主流浏览器支持，所以我们在使用属性的时候，最好像下面这样书写。

      -webkit-filter: grayscale(0%);        
              filter: grayscale(0%);

而且原作者在介绍 brightness 的过程中出现了错误，我已经在文章中改正过来（也可能作者在写这篇文章的时候那么使用是正确的，不过后来不适用了）。

这篇翻译文我也不是逐字逐句的翻译，而是将其大概意思翻译出来了，我想这样可能更加容易理解。

Ending..., thanks.