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 对图片的处理效果,例如灰度,模糊,饱和,老照片等。

体验地址:http://www.cssreflex.com/css-generators/filter

CSS3 Filter详解(改变模糊度 亮度 透明度等方法)的更多相关文章

  1. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  2. 转:【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  3. Spring Security Filter详解

    Spring Security Filter详解 汇总 Filter 作用 DelegatingFilterProxy Spring Security基于这个Filter建立拦截机制 Abstract ...

  4. java web之Filter详解

    java web之Filter详解 2012-10-20 0 个评论 作者:chenshufei2 收藏 我要投稿 .概念: Filter也称之为过滤器,它是Servlet技术中比较激动人心的技术,W ...

  5. 详解Webwork中Action 调用的方法

    详解Webwork中Action 调用的方法 从三方面介绍webwork action调用相关知识: 1.Webwork 获取和包装 web 参数 2.这部分框架类关系 3.DefaultAction ...

  6. MySQL关闭过程详解和安全关闭MySQL的方法

    MySQL关闭过程详解和安全关闭MySQL的方法 www.hongkevip.com 时间: -- : 阅读: 整理: 红客VIP 分享到: 红客VIP(http://www.hongkevip.co ...

  7. 详解PHP设置定时任务的实现方法

    详解PHP设置定时任务的实现方法 一.总结 一句话总结: 1.ignore_user_abort(true)是什么意思? 无论客户端是否关闭浏览器,下面的代码都将得到执行 2.set_time_lim ...

  8. Zuul之Filter详解

    Zuul详解 官方文档:https://github.com/Netflix/zuul/wiki/How-it-Works Zuul的中心是一系列过滤器,能够在HTTP请求和响应的路由过程中执行一系列 ...

  9. CSS3过渡详解-遁地龙卷风

    第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...

随机推荐

  1. C程序(3)

  2. Python生成器、迭代器、可迭代对象

    把一个列表[]改成()就创建了一个生成器:generator,generator保存的是算法. 可以用于for循环的数据类型:1.集合类型:list tuple dict set str2.gener ...

  3. nodejs连接mysql并进行简单的增删查改

    最近在入门nodejs,正好学习到了如何使用nodejs进行数据库的连接,觉得比较重要,便写一下随笔,简单地记录一下 使用在安装好node之后,我们可以使用npm命令,在项目的根目录,安装nodejs ...

  4. swift学习笔记之-类型转换

    //类型转换 import UIKit /*类型转换(Type Casting) 1.类型转换 可以判断实例的类型,也可以将实例看做是其父类或者子类的实例. 2.类型转换使用 is 和 as 操作符实 ...

  5. Fresco 使用笔记(一):加载gif图片并播放

    项目总结 --------------------------------------------------------------------- 前言: 项目中图文混合使用的太多太多了,但是绝大部 ...

  6. iOS--APP 登录界面图(xuer)

    ViewController.h #import "ViewController.h" @interface ViewController () @property(strong, ...

  7. iOS 抽象工厂模式

    iOS 抽象工厂模式 什么是抽象工厂模式 简单了解一下 按照惯例,我们先了解一下什么是抽象工厂模式.抽象工厂模式和工厂方法模式很相似,但是抽象工厂模式将抽象发挥的更加极致,是三种工厂模式中最抽象的一种 ...

  8. 我对XCode Objective-c Cocoa的简单理解

    我对XCode Objective-c Cocoa的简单理解 Xcode Xcode说的通俗一点就是开发OS X 和 iOS 应用程序的. 如果我们想要认真点说 ,Xcode 是运行在操作系统Mac ...

  9. IOS杂笔- 7(类方法load与initialize的区别 浅析)

    在介绍两种类方法之前,NSObject Class Reference里对这两个方法说明: +(void)initialize The runtime sends initialize to each ...

  10. android创建自定义控件

    新建一个布局title.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm ...