本词条缺少概述图,补充相关内容使词条更完整,还能快速升级,赶紧来编辑吧!
滤镜主要是用来实现图像的各种特殊效果。它在Photoshop中具有非常神奇的作用。所以有的Photoshop都按分类放置在菜单中,使用时只需要从该菜单中执行这命令即可。滤镜的操作是非常简单的,但是真正用起来却很难恰到好处。滤镜通常需要同通道、图层等联合使用,才能取得最佳艺术效果。如果想在最适当的时候应用滤镜到最适当是位置,除了平常的美术功底之外,还需要用户的滤镜的熟悉和操控能力,甚至需要具有很丰富的想象力。这样,才能有的放矢的应用滤镜,发挥出艺术才华。
中文名
CSS滤镜
外文名
css filter标识符
filter
所 属
Photoshop
作 用
用来实现图像的各种特殊效果
CSS滤镜标识符
编辑
语音
css滤镜的标识符是“filter”,总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。css滤镜分类
CSS滤镜可以直接作用于对象上,并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言,能产生更多变幻效果的则称为高级滤镜。
CSS滤镜通道
编辑
语音
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;
CSS滤镜模糊滤镜
编辑
语音
模糊滤镜给予对象朦胧神秘的效果,它的表达式如下:
filter:progid:DXImagetransform.microsoft.blur(makeshadow=makeshadow,pixelradius=pixelradius,
shadowopacity=shadowopacity);
其中makeshadow代表是否处理为阴影,pixelradius表示模糊作用深度,shadowopacity表示阴影的透明度。
CSS滤镜透明色
编辑
语音
chroma滤镜给予图像一个特定的颜色透明,它的表达式如下:"filter:Chroma(Color=color)"
说明:color:#rrggbb格式,任意。
例子:filter:Chroma(Color="#FFFFFF")
CSS滤镜投射阴影
编辑
语音
语法: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")
CSS滤镜水平翻转
编辑
语音
语法:STYLE="filter:FlipH"
例子:filter:FlipH
CSS滤镜垂直翻转
编辑
语音
语法:STYLE="filter:FlipV;"
例子:filter:FlipV;
CSS滤镜外边界
编辑
语音
CSS滤镜光效
语法:STYLE="filter:Glow(Color=color,Strength=strength)"
说明:
Color:发光颜色。
Strength:强度(0-100)
例子:filter:Glow(Color="#6699CC",Strength="5")滤镜:gray
语法:STYLE="filter:Gray"
例子:filter:Gray
CSS滤镜底片效果
编辑
语音
语法:STYLE="filter:Invert"
例子:filter:Invert
CSS滤镜透明膜
编辑
语音
CSS滤镜效果
语法:STYLE="filter:Mask(Color=color)"
例子:filter:Mask(Color="#FFFFE0")
CSS滤镜阴影效果
编辑
语音
图1 shadow阴影效果的direction属性方位图语法:filter:Shadow(Color=color,Direction=direction)
说明:
Color:#rrggbb格式。
Direction:用于设定动态模糊效果的方向,总单位为360°,0代表垂直向上,并以每45°为一个单位,而度数以方向定位时,将如右图1所示:
例子:filter:Shadow(Color="#6699CC",Direction="135")
CSS滤镜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")
CSS滤镜显示轮廓
编辑
语音
语法:STYLE="filter:Xray"
例子:filter:Xray