CSS滤镜

实习笔记

---

引言

在W3school中学习了，图像透明度的处理，突然联想到了自己平时用的美图软件的滤镜功能。就想是否在css中也能实现这样的滤镜效果，如果是的话，就可以省去大量的photoshop的工作了，于是我就各种谷歌、百度，网上关于css滤镜的资料已经很多了，但是还是感觉不太细致，于是我自己整理了一份自己的学习笔记。

1、什么是滤镜

滤镜(Filters)是CSS3里新增的一种神奇的功能。说起滤镜(filter)效果，经常使用PhotoShop的人应该非常清楚，每张用Photoshop制作出来的图片几乎都使用了滤镜进行美化。

而CSS滤镜，不需要你使用任何做图软件，用纯CSS就会生成多种的滤镜效果，比如模糊效果，透明效果，色彩反差调整，色彩反相等等；不仅能对图片进行滤镜处理，而且对任何网页元素、甚至视频都可以处理。

有很多的CSS滤镜(filter)效果可以使用：

1. Greyscale
2. Blur
3. Saturate
4. Sepia
5. Hue Rotate
6. Invert
7. Brightness
8. Contrast
9. Opacity

这些CSS属性的属性值基本上都是0到1之间的数值，但有几个例外，blur属性值以像素为单位，可以是任何整数。而hue-rotate滤镜值以”deg”单位，度数。

表达式

img {
 filter: type(value);
}

css3中的使用方法，一般都需要加浏览器前缀。

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

浏览器支持

目前支持这一目标的唯一浏览器是wekbit浏览器， Chrome和Safari浏览器。

CSS过滤器已经在Chrome自版本21支持，已经在Safari浏览器版本6中支持。

目前还不知道，IE版本10或Firefox版本17是否会支持这些属性。但现在支持滤镜最好的浏览器是WebKit的，如Chrome和Safari浏览器。

滤镜类型

grayscale类型

grayscale滤镜会给使用这个样式的图片加上一个灰色的影子，其值可以用 0~1 的小数点表示，也可以用百分比来表示。100%或1会使图片完全变成灰色。0%和0则会使图片没有变化。

img {
     filter: grayscale(1);
    }

bulr类型

bulr滤镜将会虚化效果将您的图像，使图像变得模糊，模糊的量是由定义的像素值决定的。模糊的单位是像素，因此像素越多，你将更加模糊的图像会。当像素值为0时，图像就不会有模糊效果。

img {
     filter: bulr(500px);
    }

saturate类型

saturate滤镜是增加图片色彩饱和度的，属性值是饱和度的比例，可以是小数或百分比，图片上的正常饱和值将是100 ％ 。要添加更多的饱和度，图像应用比例高于100 ％ 。

saturate img{
    filter:saturate(500%);
｝

sepia类型

sepia滤镜将给图片添加一个深褐色的色调，使你的图片看起来像旧的照片。棕褐色属性的值可以为小数和百分比值。 100 ％或1.0充满棕褐色效果和0 ％ ，或0将返回到图像恢复正常。

.sepia img{
    filter:sepia(1);
｝

Hue Rotate

Hue Rotate滤镜是对色相进行旋转，通过色相的旋转，我们可以对图片的色彩进行重组。这个值将采取的度的值，正常为0度。如果将值设置为360度频谱变成完整的圆，将是完全一样的。

.hue-rotate img{
    filter:hue-rotate(180deg);
｝

CSS Invert

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

.invert img{
    filter:invert(1);
｝

CSS Brightness

Brightness 滤镜是对图片的亮度进行处理，属性值为百分比。该属性的值可以是小数或百分比，其中100 ％或1图像正常，小于1或100%的为降低图像亮度，大于1或100%为增加图像亮度。

.brightness img{
    filter:brightness(50%);
}

CSS Contrast

Contrast 滤镜是对图片最亮的地方和最暗的地方进行调整，从而改变图片的均衡感。这个值可以是小数或百分比，数值1为对比度，使图像更暗用小于1的值，使之更亮你改变的值大于1 。

.contrast img{
    filter:contrast(0.3);
｝

CSS Opacity

Opacity 这个滤镜估计就比较熟悉了，是使图片透明。正常的不透明度设置，将被设置为1 ，如果你想我这个透明的，那么你可以将此值设置为小于1 。

.opacity img{
    opacity: 0.3;
}

友情链接

其他滤镜不错的网站

W3school图片透明度