CSS3 Filter详解(改变模糊度 亮度 透明度等方法)
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。
-webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。
现在规范中支持的效果有:
- grayscale 灰度 值为0-1之间的小数
- sepia 褐色 值为0-1之间的小数
- saturate 饱和度 值为num
- hue-rotate 色相旋转 值为angle
- invert 反色 值为0-1之间的小数
- opacity 透明度 值为0-1之间的小数
- brightness 亮度 值为0-1之间的小数
- contrast 对比度 值为num
- blur 模糊 值为length
- drop-shadow 阴影
没加什么效果的图片:
无效果 -webkit-filter:none;
1.模糊
-webkit-filter: blur(9px);
filter: blur(9px);

2.灰度
-webkit-filter: grayscale(1);
filter: grayscale(1);
3.亮度
-webkit-filter: brightness(2.3);
filter: brightness(2.3);
4.对比度
-webkit-filter: contrast(4.4);
filter: contrast(4.4);
5.饱和度
-webkit-filter: saturate(3.6);
filter: saturate(3.6);
6.色相旋转
-webkit-filter: hue-rotate(185deg);
filter: hue-rotate(185deg);
7.反色
-webkit-filter: invert(1);
filter: invert(1);
8.阴影
-webkit-filter: drop-shadow(0px 0px 5px #000);
filter: drop-shadow(0px 0px 5px #000);
9.透明度
-webkit-filter: opacity(55%);
filter: opacity(55%);
10.褐色
-webkit-filter: sepia(0.77);
filter: sepia(0.77);
CSS3 Filter详解(改变模糊度 亮度 透明度等方法)的更多相关文章
- css filter详解
css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...
- 转:【译】CSS3:clip-path详解
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...
- Spring Security Filter详解
Spring Security Filter详解 汇总 Filter 作用 DelegatingFilterProxy Spring Security基于这个Filter建立拦截机制 Abstract ...
- java web之Filter详解
java web之Filter详解 2012-10-20 0 个评论 作者:chenshufei2 收藏 我要投稿 .概念: Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,W ...
- 详解Webwork中Action 调用的方法
详解Webwork中Action 调用的方法 从三方面介绍webwork action调用相关知识: 1.Webwork 获取和包装 web 参数 2.这部分框架类关系 3.DefaultAction ...
- MySQL关闭过程详解和安全关闭MySQL的方法
MySQL关闭过程详解和安全关闭MySQL的方法 www.hongkevip.com 时间: -- : 阅读: 整理: 红客VIP 分享到: 红客VIP(http://www.hongkevip.co ...
- 详解PHP设置定时任务的实现方法
详解PHP设置定时任务的实现方法 一.总结 一句话总结: 1.ignore_user_abort(true)是什么意思? 无论客户端是否关闭浏览器,下面的代码都将得到执行 2.set_time_lim ...
- Zuul之Filter详解
Zuul详解 官方文档:https://github.com/Netflix/zuul/wiki/How-it-Works Zuul的中心是一系列过滤器,能够在HTTP请求和响应的路由过程中执行一系列 ...
- CSS3过渡详解-遁地龙卷风
第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...
随机推荐
- C程序(3)
- Python生成器、迭代器、可迭代对象
把一个列表[]改成()就创建了一个生成器:generator,generator保存的是算法. 可以用于for循环的数据类型:1.集合类型:list tuple dict set str2.gener ...
- nodejs连接mysql并进行简单的增删查改
最近在入门nodejs,正好学习到了如何使用nodejs进行数据库的连接,觉得比较重要,便写一下随笔,简单地记录一下 使用在安装好node之后,我们可以使用npm命令,在项目的根目录,安装nodejs ...
- swift学习笔记之-类型转换
//类型转换 import UIKit /*类型转换(Type Casting) 1.类型转换 可以判断实例的类型,也可以将实例看做是其父类或者子类的实例. 2.类型转换使用 is 和 as 操作符实 ...
- Fresco 使用笔记(一):加载gif图片并播放
项目总结 --------------------------------------------------------------------- 前言: 项目中图文混合使用的太多太多了,但是绝大部 ...
- iOS--APP 登录界面图(xuer)
ViewController.h #import "ViewController.h" @interface ViewController () @property(strong, ...
- iOS 抽象工厂模式
iOS 抽象工厂模式 什么是抽象工厂模式 简单了解一下 按照惯例,我们先了解一下什么是抽象工厂模式.抽象工厂模式和工厂方法模式很相似,但是抽象工厂模式将抽象发挥的更加极致,是三种工厂模式中最抽象的一种 ...
- 我对XCode Objective-c Cocoa的简单理解
我对XCode Objective-c Cocoa的简单理解 Xcode Xcode说的通俗一点就是开发OS X 和 iOS 应用程序的. 如果我们想要认真点说 ,Xcode 是运行在操作系统Mac ...
- IOS杂笔- 7(类方法load与initialize的区别 浅析)
在介绍两种类方法之前,NSObject Class Reference里对这两个方法说明: +(void)initialize The runtime sends initialize to each ...
- android创建自定义控件
新建一个布局title.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...