css中filter 滤镜详解

语法:STYLE=”filter:filtername(fparameter1, fparameter2…)” 
(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)
 
滤镜说明:
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

14.颜色变化 
语法: 
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#B5CCFA’, EndColorStr=’#B5CCFA’); 

 

黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2

时间: 2024-09-22 02:30:02

css中filter 滤镜详解的相关文章

css中filter滤镜,ie9 hack写法::root 选择器妙用

需求: 实现一个层旋转270deg,ie系列浏览器全兼容 源码:  代码如下 复制代码 <!--[if lte IE 8]>  <style>  #demo{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}  </style> <![endif]--> <style>  #demo{   width: 300px;height: 200px;background-c

css中border-radius用法详解

border-radius:由浮点数字和单位标识符组成的长度值. border-top-left-radius              ---   左上 border-top-right-radius            ---   右上 border-bottom-right-radius      ---   右下 border-bottom-left-radius        ---   左下 说明:第一个值是水平半径,如果为0则为直角 圆形  代码如下 复制代码 border-ra

PS CS中的“照片滤镜/Photo Filter”命令详解

滤镜|详解 出处:5D多媒体 这是一个跟摄影有关的重要图像调整命令. 有关这一命令的教程,现在网上没一个能说得清楚.讲得明白的.一定是我还没有找到缘故吧,反正我找到的都不你给解释,都举一个小例子了事. 要想搞明白,我首先想到了PS CS自带的帮助文档.我用是英文汉化版的PS,帮助文档没有翻译过来,看着英文自己不敢那么地确定.向群里的QQ好友要来了中文帮助说明.(在此感谢QQ好友:好像一条狗锐漫.冷弦.爱新觉罗小盆 : ) 有关这一命令的中文版叫"照片滤镜",英文版叫 "Pho

Hibernate配置文件中映射元素详解

详解 本文中将讲述Hibernate的基本配置及配置文件的应用,这对于正确熟练使用Hibernate是相当关键的. 配置文件中映射元素详解 对象关系的映射是用一个XML文档来说明的.映射文档可以使用工具来生成,如XDoclet,Middlegen和AndroMDA等.下面从一个映射的例子开始讲解映射元素,映射文件的代码如下. <?xml version="1.0"?><!--所有的XML映射文件都需要定义如下所示的DOCTYPE.Hibernate会先在它的类路径(c

java-在myeclipse中svn使用详解

问题描述 在myeclipse中svn使用详解 在myeclipse中svn使用详解.比如:标记为合并是在什么情况下用, 覆盖更新:在什么情况下使用等等. 本人对svn不是很了解,尤其是在有冲突文件的时候. 说的尽量详细点... 请各位大神指教~~~ 解决方案 如何在MyEclipse下集成SVN详解如何在MyEclipse下集成SVN详解MyEclipse中SVN使用步骤 解决方案二: myeclipse6.5集成svn 一.安装方法: 方法一.如果可以上网可在线安装 打开Myeclipse,

c# 怎样读取mobi文件或mobi格式中文文档详解

问题描述 c#怎样读取mobi文件,mobi格式中文文档详解,谁有源码或文档的,先谢过了 解决方案 解决方案二:没人回答?..解决方案三: 解决方案四:好吧我不知道--不过帮你谷歌了--网上没找到--应该是没这需求吧--mobi我记得用在了Kindle上不过应该是可以读的,因为Windows8.1上有读取这个的App,你可以逆向一下--解决方案五:https://mbc.codeplex.com/这里有demo下载看看

ASP 中 DateDiff 函数详解 主要实现两日期加减操作_ASP基础

ASP 中 DateDiff 函数详解DateDiff 函数  描述  返回两个日期之间的时间间隔.  语法  DateDiff(interval, date1, date2 [,firstdayofweek][, firstweekofyear]])  DateDiff 函数的语法有以下参数:  参数 描述  interval 必选.字符串表达式,表示用于计算 date1 和 date2 之间的时间间隔.有关数值,请参阅"设置"部分.  date1, date2 必选.日期表达式.用

Java中final关键字详解_php技巧

谈到final关键字,想必很多人都不陌生,在使用匿名内部类的时候可能会经常用到final关键字.另外,Java中的String类就是一个final类,那么今天我们就来了解final这个关键字的用法. 主要介绍:一.final关键字的基本用法.二.深入理解final关键字 一.final关键字的基本用法 在Java中,final关键字可以用来修饰类.方法和变量(包括成员变量和局部变量).下面就从这三个方面来了解一下final关键字的基本用法. 1.修饰类 当用final修饰一个类时,表明这个类不能

Java 中的注解详解及示例代码_java

在Java中,注解(Annotation)引入始于Java5,用来描述Java代码的元信息,通常情况下注解不会直接影响代码的执行,尽管有些注解可以用来做到影响代码执行. 注解可以做什么 Java中的注解通常扮演以下角色 编译器指令 构建时指令 运行时指令 其中 Java内置了三种编译器指令,本文后面部分会重点介绍 Java注解可以应用在构建时,即当你构建你的项目时.构建过程包括生成源码,编译源码,生成xml文件,打包编译的源码和文件到JAR包等.软件的构建通常使用诸如Apache Ant和Mav