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 相关文章推荐
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
CSS3 二级导航菜单的制作的示例
Apr 02 HTML / CSS
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
Jan 31 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
极简的HTML5模版
Jul 09 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
May 07 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
如何使用 resize 实现图片切换预览功能
Aug 23 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
PHP 简单数组排序实现代码
2009/08/05 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
2013/11/07 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
JS中Map和ForEach的区别
2018/02/05 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python实现的计算器功能示例
2018/04/26 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
通过实例解析Python return运行原理
2020/03/04 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
Python中常见的数制转换有哪些
2020/05/27 Python
详解Python 循环嵌套
2020/07/09 Python
如何利用python进行时间序列分析
2020/08/04 Python
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
关爱残疾人演讲稿
2014/05/24 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
redis哨兵常用命令和监控示例详解
2021/05/27 Redis