logo

-webkit-filter是神马?

2012/8/3 17:30:45 | Tag: Chrome, filter, Safari, WebKit | Hits: 940 | Author: 未知 | Source: 未知

这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0,现在webkit率先支持了它。
现在规范中支持的效果有:
grayscale 灰度
sepia 褐色
saturate 饱和度
hue-rotate 色相旋转
invert 反色
opacity 透明度
brightness 亮度
contrast 对比度
blur 模糊
drop-shadow 阴影

嗯,有些和CSS3重复了,不过,具体要怎么用还要看具体情况,至少我们可以用不同的方法实现同样的效果——比如透明度。

用法是标准的CSS写法:
-webkit-filter: blur(2px);

原图
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter.jpg[/img]

模糊
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_blur.jpg[/img]

50%灰度
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_grayscale.jpg[/img]

100%灰度
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_grayscale2.jpg[/img]

50%褐色
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_sepia.jpg[/img]

100%褐色
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_sepia2.jpg[/img]

50%亮度
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_brightness.jpg[/img]

100%亮度
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_brightness2.jpg[/img]

色相
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_hue.jpg[/img]

反色
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_invert.jpg[/img]

饱和度
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_saturate.jpg[/img]

对比度
[img]http://www.qianduan.net/wp-content/uploads/2011/12/filter_contrast.jpg[/img]

Copyright 2013 © SkyIMG.cn. All Rights Reserved. | 京ICP备05063919号