CSS3 滤镜 webkit-filter详细介绍及使用方法


Posted in HTML / CSS onDecember 27, 2012

大家可能对Instagram 这款iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它。

-webkit-filter 的用法
-webkit-filter 用法是标准的 CSS 写法,如:
复制代码
代码如下:

-webkit-filter: blur(2px);

-webkit-filter 支持的效果有
blur 模糊
brightness 亮度
contrast 对比度
drop-shadow 阴影
grayscale 灰度
opacity 透明度
sepia 褐色
invert 反色
saturate 饱和度
hue-rotate 色相旋转

下面是这几种滤镜具体的效果和代码,请在最新的 Safari 和 Chrome 浏览器上查看效果:

原图
CSS3 滤镜 webkit-filter详细介绍及使用方法

blur 模糊
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter:blur(2px);

brightness 亮度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter:brightness(25%);

contrast 对比度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: contrast(50%);

drop-shadow 阴影
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: opacity(50%);

grayscale 灰度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: grayscale(80%);

sepia 褐色
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: sepia(100%);

invert 反色
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: invert(100%);

hue-rotate 色相旋转
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter:hue-rotate(180deg);

saturate 饱和度
CSS3 滤镜 webkit-filter详细介绍及使用方法
-webkit-filter: saturate(1000%);

HTML / CSS 相关文章推荐
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
移动Web—CSS为Retina屏幕替换更高质量的图片
Dec 24 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
使用phonegap检测网络状态的方法
Mar 30 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
html5 offlline 缓存使用示例
Jun 24 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
纯CSS3实现地球自转实现代码(图文教程附送源码)
Dec 26 #HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 #HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 #HTML / CSS
Web页面中八种创建多列等高(等高列布局)的实现技术
Dec 24 #HTML / CSS
CSS3的Border-radius轻松制作圆角
Dec 24 #HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 #HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 #HTML / CSS
You might like
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
2009/03/03 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
如何创建一个JavaScript弹出DIV窗口层的效果
2013/09/25 Javascript
js单例模式详解实例
2013/11/21 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
2016/09/19 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
angularjs实现猜数字大小功能
2020/05/20 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
详解Python中的条件判断语句
2015/05/14 Python
Python中的id()函数指的什么
2017/10/17 Python
Python基于socket实现简单的即时通讯功能示例
2018/01/16 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
PyQt5实现简易电子词典
2019/06/25 Python
python基于openpyxl生成excel文件
2020/12/23 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
营业员个人总结的自我评价
2013/10/25 职场文书
施工材料员岗位职责
2014/02/12 职场文书
创先争优个人承诺书
2014/08/30 职场文书
党员查摆剖析材料
2014/10/10 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
党员批评与自我批评
2014/10/15 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
党员理论学习心得体会
2016/01/21 职场文书
Linux中如何安装并部署Redis
2022/04/18 Servers