支持的效果有:

  • blur(模糊)
  • grayscale(灰度)
  • drop-shadow(阴影)
  • sepia(褐色滤镜)
  • brightness(亮度)
  • contrast(对比)
  • hue-rotate(色相)
  • invert(反相)
  • saturate(饱和度)
  • opacity(透明度)

Chrome 18.0.976.0以上版本看这个demo:

http://www.css88.com/html5-demo/-webkit-filter/index.html 或 (FQ)http://html5-demos.appspot.com/static/css/filters/index.html

滤镜说明:
  Alpha:设置透明层次
  blur:创建高速度移动效果,即模糊效果
  Chroma:制作专用颜色透明
  DropShadow:创建对象的固定影子
  FlipH:创建水平镜像图片
  FlipV:创建垂直镜像图片
  glow:加光辉在附近对象的边外
  gray:把图片灰度化
  invert:反色
  light:创建光源在对象上
  mask:创建透明掩膜在对象上
  shadow:创建偏移固定影子
  wave:波纹效果
  Xray:使对象变得像被x光照射一样
  1、滤镜:Alpha
  语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)" 
  说明:
  Opacity:起始值,取值为0~100, 0为透明,100为原图。
  FinishOpacity:目标值。
  Style:1或2或3
  StartX:任意值
  StartY:任意值
  例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") 
  2、滤镜:blur
  语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
  说明:
  Add:一般为1,或0。
  Direction:角度,0~315度,步长为45度。
  Strength:效果增长的数值,一般5即可。
  例子:filter:Blur(Add="1",Direction="45",Strength="5")
  3、滤镜:Chroma
  语法:STYLE="filter:Chroma(Color = color)"
  说明:color:#rrggbb格式,任意。
  例子:filter:Chroma(Color="#FFFFFF")
  4、滤镜:DropShadow
  语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
  说明:Color:#rrggbb格式,任意。
  Offx:X轴偏离值。
  Offy:Y轴偏离值。
  Positive:1或0。
  例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
  5、滤镜:FlipH
  语法:STYLE="filter:FlipH" 
  例子:filter:FlipH 
  6、滤镜:FlipV
  语法:STYLE="filter:FlipV"
  例子:filter:FlipV 
  7、滤镜:glow
  语法:STYLE="filter:Glow(Color=color, Strength=strength)"
  说明:
  Color:发光颜色。
  Strength:强度(0-100)
  例子:filter:Glow(Color="#6699CC",Strength="5")
  8、滤镜:gray
  语法:STYLE="filter:Gray"
  例子:filter:Gray
  9、滤镜:invert
  语法:STYLE="filter:Invert"
  例子:filter:Invert
  10、滤镜:mask
  语法:STYLE="filter:Mask(Color=color)"
  例子:filter:Mask (Color="#FFFFE0")
  11、滤镜:shadow
  语法:filter:Shadow(Color=color, Direction=direction)
  说明:
  Color:#rrggbb格式。
  Direction:角度,0-315度,步长为45度。
  例子:filter:Shadow (Color="#6699CC", Direction="135")
  12、滤镜:wave
  语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
  说明:
  Add:一般为1,或0。
  Freq:变形值。
  LightStrength:变形百分比。
  Phase:角度变形百分比。
  Strength:变形强度。
  例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
  13、滤镜:Xray
  语法:STYLE="filter:Xray" 
  例子:filter:Xray

CSS Filter的更多相关文章

  1. css filter详解

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

  2. CSS filter 有哪些神奇用途

    背景 基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染.它的值可以为 filter 函数 <filter-function ...

  3. CSS filter 属性

    filter 将模糊或者颜色偏移等图像效果用于元素,通常用于调整图像,背景和边框的渲染 css 标准中已内置一些预定义效果的函数,也可通过url使用SVG滤镜 语法 /* URL to SVG fil ...

  4. CSS filter 模拟黑洞照片效果

    今天被世界上第一张黑洞照片刷屏. 一整天,哪里都是这张照片.看的多了.我就想用css做一个吧. 建议在chrome上查看. 访问地址:http://suohb.com/work/blankHole.h ...

  5. [CSS] Manipulate Images Using CSS Filter and Blend Modes

    Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, yo ...

  6. 20190614笔记(颜色透明度,css,filter,滤镜,计算属性,json和formData转换)

    今天忙里偷闲,把最近做的笔记做一下整理. 1.json和formData互相转换 适用场景:对接后台接口.后台接口写的因人而异,不同的人有不同的风格.比如,文件上传,原本就是formData格式,有人 ...

  7. 【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2018/11/css-f ...

  8. WebRTC与CSS滤镜(CSS filter)

    我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来. 本文将滤镜与视频结合.给视频加上一层滤镜.主要使用到的是filter属性. canvas与滤镜 先来看filter ...

  9. [css filter]filter在界面实现滤镜效果

    最近逛当当,发现当当尾品会的首页推荐最底端的商品链接是灰色的图片,然后鼠标hover之后就会变成正常的彩色 肯定不是通过img来改变的,然后直接看了一下源码,其实是用的filter属性 _(:з」∠) ...

随机推荐

  1. ThinkPHP第十四天(显示TRACE界面配置,关联模型详解定义)

    1.显示TRACE界面,首选需要在显示模版界面,$this->display(),然后需要在配置文件中配置 SHOW_PAGE_TRACE => true 2.关联模型使用 主表以user ...

  2. MYSQL事务和锁

    mysql事务(一)—转载 2012年12月20日 ⁄ Mysql数据库, 技术交流 ⁄ 暂无评论 一. 什么是事务 事务就是一段sql 语句的批处理,但是这个批处理是一个atom(原子) ,不可分割 ...

  3. 哈希长度扩展攻击的简介以及HashPump安装使用方法

    哈希长度扩展攻击(hash length extension attacks)是指针对某些允许包含额外信息的加密散列函数的攻击手段.该攻击适用于在消息与密钥的长度已知的情形下,所有采取了 H(密钥 ∥ ...

  4. wampServer 修改mySql 的root用户密码

    刚安装好时  密码是空的  所以不用输入直接回车就能进入 修改密码参考http://www.cnblogs.com/hooray/archive/2011/07/23/2114792.htmlhttp ...

  5. 让自己的apk可以被别人用二维码下载

    通过二维码下载的流程是, 1.截获地址当有一个url被二维码扫描后的被截获,请先确认能够被截获. 2.接受intent无论是把这个消息的地址发送给activity,还是reciver,都要进入到你的程 ...

  6. Android GPS应用:动态获取位置信息

    在上文中,介绍了GPS概念及Android开发GPS应用涉及到的常用类和方法.在本文中,开发一个小应用,实时获取定位信息,包括用户所在的纬度.经度.高度.方向.移动速度等.代码如下: Activity ...

  7. MVC日期比较(转)

     /// <summary>     /// Specifies that the field must compare favourably with the named field, ...

  8. JavaScript constructor prototyoe

    想加深一下自己对construtcor prototype的印象所以写了这一篇文章 对象的constructor 就是Object 除了通过构造函数创建的对象意外 他的constructor 都是 都 ...

  9. database schema

    数据中有4个Schema无法被删除 ● dbo, 具有db_owner或者db_ddl_admin 的用户,新创建对象默认schema就是dbo ● guest , 用来给guest 用户使用,这个s ...

  10. iOS 项目中的NSNotification简单使用

    iOS中NSNotification的简单使用 好久没有写过博客了,总是遇到问题查一下,今天查的又是一个老问题,想了想,还是记录一下!今天在项目开发中遇到一个配置及时性处理的问题,想了想之后决定用通知 ...