CSS3 filter

CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。

好吧,每次写这种博客的时候,都有改版的冲动,我把详细内容写在了这里,请猛击:DEMO

使用方法:

filter:filter(value);
filter:filter(value) filter(value) filter(value);/* 多属性 */

Blur(模糊)

图像模糊参数单位:px/em/pt。 示例:

filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);

Brightness(亮度)

亮度参数:”-1″至”1″,值越大亮度越高。示例:

filter: brightness(0.3);
-webkit-filter: brightness(0.3);
-moz-filter: brightness(0.3);
-o-filter: brightness(0.3);
-ms-filter: brightness(0.3);

Saturation(饱和度)

饱和度参数:半分比,以100%为中间值。 示例:

filter: saturate(50%);
-webkit-filter: saturate(50%);
-moz-filter: saturate(50%);
-o-filter: saturate(50%);
-ms-filter: saturate(50%);

Hue Rotate(色相)

色相参数:角度值0—360。 示例:

filter: hue-rotate(180deg);
-webkit-filter: hue-rotate(180deg);
-moz-filter: hue-rotate(180deg);
-o-filter: hue-rotate(180deg);
-ms-filter: hue-rotate(180deg);

Contrast(对比度)

对比度参数:百分比;以100%为中间值。示例:

filter: contrast(50%);
-webkit-filter: contrast(50%);
-moz-filter: contrast(50%);
-o-filter: contrast(50%);
-ms-filter: contrast(50%);

Invert(反相)

反相参数:百分比;0%-100%。示例:

filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);

Grayscale(灰度)

灰度参数:百分比 0%-100%。示例:

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);

Sepia(怀旧)

怀旧参数:百分比 0%-100%。示例:

filter: sepia(100%);
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);

:)

There is one more thing
如果你发现过滤后的图片对比原图没有什么变化,那说明你的浏览器不支持这个CSS3 filter属性。
其实目前只有webkit浏览器支持该属性。Safari、Firefox、Opera、IE还不给力。
详细内容请猛戳:DEMO



《CSS3 filter》有2个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注