CSS 滤镜详解
语法:STYLE="filter:filtername(fparameter1, fparameter2...)"
(Filtername为滤镜的名称,fparameter1、fparameter2等是滤镜的参数)
滤镜说明:
alpha:设置透明层次
blur:创建高速度移动效果,即模糊效果
chroma:制作专用颜色透明
DropShadow:创建对象的固定影子
FlipH:创建水平镜像图片
FlipV:创建垂直镜像图片
glow:加光辉在附近对象的边外
gray:把图片灰度化
invert:反色
light:创建光源在对象上
mask:创建透明掩膜在对象上
shadow:创建偏移固定影子
wave:波纹效果
Xray:使对象变得像被x光照射一样
css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。 css滤镜分类
可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言,能产生更多变幻效果的则称为高级滤镜。
alpha(通道)
alpha滤镜用于设定透明度,它的表达式如下: filter:alpha(opacity=opacity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY) 其中opacity表示透明度等级,可选值从0~100,0代表完全透明,100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代 表统一形状;1代表线形;2代表放射状;3代表长方形。StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变 透明效果的结束坐标。 ie下实现方式filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 标准浏览器(FF、Chrome、Opera)下实现方式:opacity: 0.5;
blur(模糊)
模糊滤镜给予对象朦胧神秘的效果,它的表达式如下: filter:progid:DXImagetransform.microsoft.blur(makeshadow=makeshadow,pixelradius=pixelradius, shadowopacity=shadowopacity); 其中makeshadow代表是否处理为阴影,pixelradius表示模糊作用 深度,shadowopacity表示阴影的透明度。
Chroma(透明色)
chroma滤镜给予图像一个特定的颜色透明,它的表达式如下:"filter:Chroma(Color=color)" 说明:color:#rrggbb格式,任意。 例子:filter:Chroma(Color="#FFFFFF")
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")
FlipH(水平翻转)
语法:STYLE="filter:FlipH" 例子:filter:FlipH
FlipV(垂直翻转)
语法:STYLE="filter:FlipV;" 例子:filter:FlipV;
glow(外边界光效)
语法:STYLE="filter:Glow(Color=color,Strength=strength)" 说明: Color:发光颜色。 Strength:强度(0-100) 例子:filter:Glow(Color="#6699CC",Strength="5")滤 镜:gray 语法:STYLE="filter:Gray" 例子:filter:Gray
invert(底片效果)
语法:STYLE="filter:Invert" 例子:filter:Invert
mask(透明膜效果)
语法:STYLE="filter:Mask(Color=color)" 例子:filter:Mask(Color="#FFFFE0")
shadow(阴影效果)
语法:filter:Shadow(Color=color,Direction=direction) 说明: Color:#rrggbb格 式。 Direction:用于设定动态模糊效果的方向,总单位为360°,0代表垂直向上,并以每45°为一个单位,而度数以方向定位时,将如右图所 示: 例子:filter:Shadow(Color="#6699CC",Direction="135")
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")
Xray(只显示轮廓)
语法:STYLE="filter:Xray" 例子:filter:Xray
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
以上内容为本人业余时间整理,部分内容来源网络,如有错误欢迎各位批评指正。
*/