快速业务通道

介绍-webkit-filter:-webkit-filter是什么

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-22

这两天有看到国外网站纷纷介绍-webkit-filter,开始很迷惑,丫是想要学IE吗?今天看了下,和IE的滤镜没一毛关系啊,而且,效果很赞!

这些滤镜效果最初是用于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);

然后,Eric Bidelman写了一个demo,可以很方便的查看各种效果。但是考虑到某网站因为不明原因在国内无法访问,我将该demo页面简单的翻译了下,放到这边给大家预览,请猛击查看。

请注意,改滤镜目前只有最新的webkit nightly版本和Chrome 18.0.976以上版本才支持,所以你需要下载一个最新的版本来体验~~我用的是webkit nightly。

现在,让我们看一下一些简单的效果吧:

原图

模糊

50%灰度

100%灰度

50%褐色

100%褐色

50%亮度

100%亮度

色相

反色

饱和度

对比度

嗯,我们在手机端的各种特效如lomo、日系等,也可以在页面简单实现一些了,配合css3内阴影、遮罩、渐变等,相信不必instagram等差多少。

ps:sepia的翻译貌似有点儿问题,求专业指点。

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号