css3 filter

css3中filter俗称滤镜效果。它可以调整元素的色调(灰化、亮化、对比度、饱和度)、也能使元素产生模糊和反相的等效果。通常,我们使用filter的各种功能函数来处理图片,如果你将它应用于html页面,也会获得不一般的效果。这个特性支持最新版的chrome和firefox,接下来,我们来介绍filter下的八种功能:

hue-rotate 色调

hue-rotate 色调 -webkit-filter: hue-rotate(50deg); 取值为 0 – 360(可为负数),默认值为0,即没有任何效果。当值大于360,或者小于0时,会重复 0 – 360所产生的效果,即如同transform 中 rotate的取值效果。

-webkit-filter: hue-rotate(50deg);
filter: hue-rotate(50deg);


50deg

blur 模糊

取值为 0 – 某个数值,默认值为0,不模糊。随着模糊半径的增大,而逐渐模糊

-webkit-filter: blur(1px);
filter: blur(1px);

1px

grayscale 灰化

取值为 0 – 100%,默认值为0。将图片灰化

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

70%

sepia 怀旧

取值为 0 – 100%,默认值为0 。使图片带有旧旧的(淡黄色)感觉

-webkit-filter: sepia(60%);
filter: sepia(60%);

60%

brightness 亮度

取值为 0 – 100% ,默认值为100%,即没有对图片做任何处理,当为0时,则整个图片变为黑色。在此之前,要实现图片半透明,通常的做法是在图片上覆盖一个半透明的层!现在却可以轻而易的实现:

-webkit-filter: brightness(50%);
filter: brightness(50%);

50%

contrast 对比度

取值为0 – 某个百分比,默认值为100%,即没有对图片做任何处理。值得注意的是,contrast的值不仅可以是百分之,也可以是非负整数,其中取值为1图像无任何变化。据测试,百分比到500%左右就没有什么太大变化了

-webkit-filter: contrast(300%);
filter: contrast(300%); // 或者 
-webkit-filter: contrast(3);
filter: contrast(3);

3

saturate 饱和度

取值为 0 – 100% ,默认值为100%,即没有对图片做任何处理

-webkit-filter: saturate(30%);
filter: saturate(30%);

30%

invert 反相

取值为 0 – 100% ,默认值为0,即图片无任何效果。值为50%时,图片为纯灰色。当大于50%时,则图片的色调逐渐过度到反色

-webkit-filter: invert(70%);
filter: invert(70%);

70%

评论功能已关闭。