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 @font-face属性使用指南
Dec 12 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
使用CSS3来实现滚动视差效果的教程
Aug 24 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
元素水平垂直居中的方式
Mar 31 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 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/10 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
PHP钩子实现方法解析
2019/05/21 PHP
JS链式调用的实现方法
2013/03/07 Javascript
js中一个函数获取另一个函数返回值问题探讨
2013/11/21 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
小程序转发探索示例
2019/02/19 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
JS如何定义用字符串拼接的变量
2020/07/11 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python的requests网络编程包使用教程
2016/07/11 Python
Python程序运行原理图文解析
2018/02/10 Python
对Python中的@classmethod用法详解
2018/04/21 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
NumPy中的维度Axis详解
2019/11/26 Python
python神经网络编程实现手写数字识别
2020/05/27 Python
几个SQL的面试题
2014/03/08 面试题
财务会计人员岗位职责
2013/11/30 职场文书
大学本科毕业生求职信范文
2013/12/18 职场文书
单位实习证明怎么写
2014/01/17 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
2016年小学推普宣传周活动总结
2016/04/06 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
创业计划书之家政服务
2019/09/18 职场文书
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js