支持的效果有:

  • 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. LINQ的用法

    http://www.cnblogs.com/liulun/archive/2013/02/26/2909985.html(转载)

  2. selenium 学习笔记 ---新手学习记录(9) 问题总结(java)

    1.百度搜索目标--实例 boolean flag; //点击次数 int shcs=3; int i=0; //窗口焦点控制 String detailWindowHandle = null; // ...

  3. Inlay技术要求

    物理特性: 项目 要求内容 备考 基准值 公差 INLAY尺寸 A(长) 480mm ±0.5mm B(宽) 380mm ±0.5mm 线圈位置 C(天地位置) 16.05mm ±0.2mm D(左右 ...

  4. C++_template_栈的链式存储及实现

    由于在C++数据结构中的代码不完整,特补全.等日后当工程库调用. 若有疑问,请留言. #include<iostream> using namespace std; template< ...

  5. HDOJ 1003 Max Sum(线性dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1003 思路分析:该问题为最大连续子段和问题,使用动态规划求解: 1)最优子结构:假设数组为A[0, 1 ...

  6. hql中不能写count(1)能够写count(a.id)

    hql中不能写count(1)能够写count(a.id)里面写详细的属性 String hql="select new com.haiyisoft.vo.entity.cc.repo.Bu ...

  7. fopen()函数

    1.2 文件的输入输出函数 键盘.显示器.打印机.磁盘驱动器等逻辑设备, 其输入输出都能够通过文件管理的方法来完毕.而在编程时使用最多的要算是磁盘文件, 因此本节主要以磁盘文件为主, 具体介绍Turb ...

  8. 发送Email并添加附件

    1. 添加命名空间 using System.Net.Mail; using System.Net; 2. The HTML MarpUp <html xmlns="http://ww ...

  9. struct 如何存储指针类型的值

    通过 __unsafe_unretained标示符标示指针类型的值,否则xcode会报以下错误(前提,你使用的是ARC模式): ARC forbids Objective-C objects in s ...

  10. MySQL支持emoji

    方案1: 应用层支持 MySQL默认的数据库编码是utf8,对于emoji文字是不能直接存储的,要想存储emoji,有许多库支持对emoji的转换,例如将