CCS滤镜参考语法:STYLE="filter:filtername(fparameter1, fparameter2...)"
  (Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)
script 语法:HTMLElement.filters.filterName.fParameter=value;

  滤镜说明:

  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

filter(HTML)滤镜用法的更多相关文章

  1. Atitit (Sketch Filter)素描滤镜的实现  图像处理  attilax总结

    Atitit (Sketch Filter)素描滤镜的实现  图像处理  attilax总结 1.1. 素描滤镜的实现方法比较简单,这里我们直接写出算法过程如下:1 1.2. 颜色减淡COLOR_DO ...

  2. CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的

    CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...

  3. 【转载】CSS3 filter:drop-shadow滤镜与box-shadow区别应用

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...

  4. filter 图片滤镜的各种设置

    filter 图片滤镜 给当前元素加滤镜_改变它的明亮度 定义:filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度).作用在图片上或元素上.div{ },或 d ...

  5. 图像滤镜艺术---(Sketch Filter)素描滤镜

    原文:图像滤镜艺术---(Sketch Filter)素描滤镜 (Sketch Filter)素描滤镜 素描滤镜的实现方法比较简单,这里我们直接写出算法过程如下: 1,对原图S进行去色命令得到灰度图A ...

  6. 图像滤镜艺术---Glow Filter发光滤镜

    原文:图像滤镜艺术---Glow Filter发光滤镜 Glow Filter发光滤镜 Glow Filter发光滤镜是一种让图像产生发光效果的滤镜,它的实现算法如下: 1,对原图P进行高斯模糊得到图 ...

  7. 图像滤镜艺术---(Nostalgla Filter)老照片滤镜

    原文:图像滤镜艺术---(Nostalgla Filter)老照片滤镜 (Nostalgla Filter)老照片滤镜 Nostalgla Filter主要是通过算法来模拟一种复古,陈旧的照片风格,以 ...

  8. 图像滤镜艺术---(Lightleaks Filter)漏光滤镜

    原文:图像滤镜艺术---(Lightleaks Filter)漏光滤镜 (Lightleaks Filter)漏光滤镜 漏光拍摄其实就是一种摄影手法,最初是因为强烈光照导致相片交卷的过分曝光,最终在成 ...

  9. CSS3 filter 模糊滤镜的应用

    CSS3 filter 模糊滤镜的应用   在segmentfault上回答过的一个问题,如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解,只觉得滤镜应该只是应用于图片上的.而且各大网站的de ...

随机推荐

  1. Canvas画圆形

    转载:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes#圆弧 function d ...

  2. 缓存设计(cache-design)

    分布式缓存设计 目前常见的缓存方案都是分层缓存,通常可以分为以下几层: 1.1NG本地缓存,命中的话直接返回 1.2 NG没有命中时则需要查询分布式缓存,如redis 1.3 如果分布式缓存没有命中则 ...

  3. Django REST framework 第七章 Schemas & client libraries

    模式是一个机器可读文档,描述可用的API端点,URL以及它们支持的操作. 模式对于自动生成文档是一个很有用的工具,也可以用来动态调用可以于API交互的客户端库. Core API 为了提供模式支持,R ...

  4. 微服务之Spring cloud

    微服务 Spring cloud Spring Cloud provides tools for developers to quickly build some of the common patt ...

  5. 如何在eclipse安装apk包

    如何在eclipse安装下载好的apk包 好像是有好几种方法,我成功的是这种. 1.首先启动模拟器,我选择的是Android 4.2.2,因为...默认安得Android 7.1.1起不了,真是大坑, ...

  6. shell编程 之 echo命令和printf命令

    1 echo命令基本情况: echo显示普通字符:echo "i am studying shell"(有木有引号都可以) 支持转义字符:echo "\"hel ...

  7. 【转载】Latex定制章节编号格式和计数器

    原文: http://www.chengkaiblog.com/software-application/latex/customize-section-format-counter.html _1. ...

  8. 【Math for ML】矩阵分解(Matrix Decompositions) (下)

    [Math for ML]矩阵分解(Matrix Decompositions) (上) I. 奇异值分解(Singular Value Decomposition) 1. 定义 Singular V ...

  9. [python] 基础工具介绍好文推荐

    Github上有个哥们写的,还不错,mark一下: https://github.com/lijin-THU/notes-python/blob/master/index.ipynb 相对全面的介绍了 ...

  10. Codeforces 408D Long Path (DP)

    题目: One day, little Vasya found himself in a maze consisting of (n + 1) rooms, numbered from 1 to (n ...