CSS3 图片滤镜

对图片的处理有很多方法，今天介绍下 CSS3 的图片滤镜。例如灰度，模糊，饱和，老照片等图片滤镜效果。

我们可以使用 CSS3 来实现以下的效果(由于该属性只有 webkit 内核的浏览器支持，建议使用 chrome 阅读，demo 可见)：

Greyscale(灰度)
Blur(模糊)
Saturate（饱和)
Sepia(老照片)
Hue Rotate(色相旋转)
Invert(颠倒)
Brightness(高光)
Contrast(对比)
Opacity(透明度)

如何使用 CSS3 滤镜？

很简单，就如同其他的 CSS 属性一样就可以了：

img {
    filter: type(value);
}

和其他的部分 CSS 属性类似，我们需要兼容其他的浏览器写法，不过目前，只有-webkit这样的写法（即chrome和safari）支持：

img {
    filter: type(value);
    -webkit-filter: type(value);
    -moz-filter: type(value);
    -ms-filter: type(value);
    -o-filter: type(value);
}

OK, 下面我们来一一介绍：

CSS Greyscale

Greyscale 这个属性，将会使图片变灰。属性值(value)既可以是分数，也可以是百分数，它的作用是使图片更灰或者不灰。

DEMO 演示

实现代码

HTML:

<div class="greyscale">
    <img src="images/water.jpg" />
</div>

CSS:

.greyscale img {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}
.greyscale img:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
}

CSS Blur

Blur 滤镜是使图片模糊。模糊的层度来自于设置的属性值。

DEMO 演示

实现代码

HTML:

<div class="blur">
    <img src="images/water.jpg" />
</div>

CSS:

.blur img {
    filter: url(/static/svg/filter.svg#blur);
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}
.blur img:hover {
    filter: blur(0);
    -webkit-filter: blur(0);
    -moz-filter: blur(0);
    -o-filter: blur(0);
    -ms-filter: blur(0);
}

CSS Saturate

Saturate 效果可以增加图片的颜色饱和度。这里的属性值是饱和度的比例，例如百分之两百，而百分之百则是不变。

DEMO 演示

实现代码

HTML:

<div class="saturate">
    <img src="images/water.jpg" />
</div>

CSS:

.saturate img {
    filter: saturate(500%);
    -webkit-filter: saturate(500%);
    -moz-filter: saturate(500%);
    -o-filter: saturate(500%);
    -ms-filter: saturate(500%);
}
.saturate img:hover {
    filter: saturate(100%);
    -webkit-filter: saturate(100%);
    -moz-filter: saturate(100%);
    -o-filter: saturate(100%);
    -ms-filter: saturate(100%);
}

CSS Sepia

Sepia 滤镜对图片的处理效果，犹如回到了五六十年代的那种老照片了。

DEMO 演示

实现代码

HTML:

<div class="sepia">
    <img src="images/water.jpg" />
</div>

CSS:

.sepia img {
    filter: sepia(1);
    -webkit-filter: sepia(1);
    -moz-filter: sepia(1);
    -o-filter: sepia(1);
    -ms-filter: sepia(1);
}
.sepia img:hover {
    filter: sepia(0);
    -webkit-filter: sepia(0);
    -moz-filter: sepia(0);
    -o-filter: sepia(0);
    -ms-filter: sepia(0);
}

CSS Hue Rotate

Hue Rotate 滤镜是对色相进行旋转，通过色相的旋转，我们可以对图片的色彩进行重组。属性值为 360 度里的值。

DEMO 演示

实现代码

HTML:

<div class="hue-rotate">
    <img src="images/water.jpg" />
</div>

CSS:

.hue-rotate img {
    filter: hue-rotate(180deg);
    -webkit-filter: hue-rotate(180deg);
    -moz-filter: hue-rotate(180deg);
    -o-filter: hue-rotate(180deg);
    -ms-filter: hue-rotate(180deg);
}
.hue-rotate img:hover {
    filter: hue-rotate(0);
    -webkit-filter: hue-rotate(0);
    -moz-filter: hue-rotate(0);
    -o-filter: hue-rotate(0);
    -ms-filter: hue-rotate(0);
}

CSS Invert

Invert 滤镜是反相效果，看起来就像老相机的底片一样。

DEMO 演示

实现代码

HTML:

<div class="invert">
    <img src="images/water.jpg" />
</div>

CSS:

.invert img {
    filter: invert(1);
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -o-filter: invert(1);
    -ms-filter: invert(1);
}
.invert img:hover {
    filter: invert(0);
    -webkit-filter: invert(0);
    -moz-filter: invert(0);
    -o-filter: invert(0);
    -ms-filter: invert(0);
}

CSS Brightness

Brightness 滤镜是对图片的亮度进行处理，属性值为百分比。

DEMO 演示

实现代码

HTML:

<div class="brightness">
    <img src="images/water.jpg" />
</div>

CSS:

.brightness img {
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
    -moz-filter: brightness(50%);
    -o-filter: brightness(50%);
    -ms-filter: brightness(50%);
}
.brightness img:hover {
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
    -moz-filter: brightness(100%);
    -o-filter: brightness(100%);
    -ms-filter: brightness(100%);
}

CSS Contrast

Contrast 滤镜是对图片最亮的地方和最暗的地方进行调整，从而改变图片的均衡感。

DEMO 演示

实现代码

HTML:

<div class="contrast">
    <img src="images/water.jpg" />
</div>

CSS:

.contrast img {
    filter: contrast(0.3);
    -webkit-filter: contrast(0.3);
    -moz-filter: contrast(0.3);
    -o-filter: contrast(0.3);
    -ms-filter: contrast(0.3);
}
.contrast img:hover {
    filter: contrast(1);
    -webkit-filter: contrast(1);
    -moz-filter: contrast(1);
    -o-filter: contrast(1);
    -ms-filter: contrast(1);
}

CSS Opacity

Opacity 这个滤镜估计就比较熟悉了，是使图片透明。

DEMO 演示

实现代码

HTML:

<div class="opacity">
    <img src="images/water.jpg" />
</div>

CSS:

.opacity img {
    opacity:0.3;
}
.opacity img:hover {
    opacity:1;
}

结语

本文译自 CSS3 Image Filters，略有不同。经过测试发现，如今的 Firefox 不支持 CSS 的filter属性，如要使用，可以通过使用svg来解决。

掌心