|
使用css滤镜，我们可以用一张图片做出很多类似phtoshop滤镜的效果。
本篇的主要内容是：
 Alpha滤镜
Blur滤镜
Chroma滤镜
Dropshadow滤镜
FlipH、FlipV滤镜
Glow滤镜
Gray滤镜
Invert滤镜
Light滤镜
Mask滤镜
Shawdow滤镜
Wave滤镜
X-ray滤镜
滤镜效果窗口就是【图6.10】。我们用一张图片做例子，学习各种滤镜特效。（btw：这是偶最近狂喜欢的多多宝宝，呵呵~~太可爱了太可爱了，怎么能那么可爱呢~~~）
咳咳，花痴发完了。。。进入正题吧——
 Alpha滤镜
语法：Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)
参数和功能： 使对象产生透明度。
参数名称 | 功能 | 参数 | | Opacity | 图片的不透明度 | 值从0－100，0为完全透明，100为完全不透明 | | FinishOpacity | 设置渐变的透明效果时，用来指定结束时的透明度 | 值从0－100，0为完全透明，100为完全不透明 | | Style | 指定渐变的显示形状 | 0：没有渐进；1：直线渐进；2：圆形渐进；3：矩形渐进 | | StartX | 渐变透明效果开始的X坐标值 | | | StartY | 渐变透明效果开始的Y坐标值 | | | FinishX | 渐变透明效果结束的X坐标值 | | | FinishY | 渐变透明效果结束的Y坐标值 | |
示范：
| | filter：alpha(opacity=80)}
仅仅改变了图片的透明度
| alpha(opacity=0,finishopacity=100,style=1,
startx=0,starty=85,finishx=150,finishy=85)
有了一个直线的渐进效果 | | | alpha(opacity=0,finishopacity=100,style=2,
startx=0,starty=85,finishx=150,finishy=85)
改变style＝2，可以得到圆形的渐进效果 | alpha(opacity=0,finishopacity=100,style=2,
startx=0,starty=85,finishx=150,finishy=85)
改变style＝3，可以得到矩形的渐进效果 |
Blur滤镜
语法：Blur(Add=?, Direction=?, Strength=?)
参数和功能： 使对象产生模糊效果。
参数名称 | 功能 | 参数 | | Add | 指定图片是否显示原来的模糊方向 | 0：不显示原对象；1：显示原对象 | | Direction | 设置模糊的方向 | 0（上），45（右上），90（右），135（右下），180（下），225（左下），270（左），315（左上） | | Strength | 指定模糊图像模糊的半径大小 | 以pixels为单位，默认为5 |
示范： | | blur(add=1,direction=90,strength=25) | blur(add=0,direction=90,strength=25) |
Chroma滤镜
语法：Chroma(Color=?)
参数和功能： 某个颜色变透明。这个功能对图片的支持不是很好。
参数名称 | 功能 | 参数 | color | 把图片或文字中的某个颜色变为透明 | RGB格式的颜色值 |
Dropshadow滤镜
语法：DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
参数和功能： 阴影效果。这个功能对图片的支持不是很好，普遍用于文字。
参数名称 | 功能 | 参数 | | Color | 指定阴影的颜色 | RGB格式的颜色值 | | OffX | 指定阴影相对于对象在水平方向的偏移 | 整数。正数表示阴影在对象右方，负数表示在左方。 | | OffY | 指定阴影相对于对象在水垂直方向的偏移 | 整数。正数表示阴影在对象上方，负数表示在下方。 | | Positive | 指定阴影的透明度 | 0：透明，无阴影；非0：阴影的强度 |
示范： | DropShadow(Color=#000000, OffX=1, OffY=1, Positive=1) |
FlipH、FlipV滤镜
无任何参数。FlipH使对象产生水平翻转效果；FlipV使对象产生垂直翻转效果。
示范：
Glow滤镜
语法：Glow(Color=?, Strength=?)
参数和功能： 使对象的外轮廓产生一种光晕效果。一般用于文字效果。 参数名称 | 功能 | 参数 | | Color | 指定光晕的颜色 | RGB格式的颜色值 | | Strength | 指定光晕的范围 | 设定值从1－255，数字越大光晕越强 |
示范： 文字效果 | Glow(Color=ff0000, Strength=2) |
Gray滤镜
无任何参数。使图片由彩色变为灰白色调。
示范：
Invert滤镜
无任何参数。使图片产生照片底片的效果。
示范：
Light滤镜
语法：Light(?)
参数和功能：模拟光源的投射效果。 不过要通过调用方法来实现，这就需要用到javascript动态滤镜编程。在这里就不细说了。 方法 | 功能 | | AddAmbient | 加入包围的光源 | | AddCone | 加入锥形光源 | | Addpoint | 加入点光源 | | Changcolor | 改变光的颜色 | | Changstrength | 改变光源的强度 | | Clear | 清除所有的光源 | | MoveLight | 移动光源 |
Mask滤镜
语法：Mask(Color=?)
参数和功能：在对象上建立一个覆盖于表面的膜。对图像的支持不好，普遍用于文字。 示范： Shawdow滤镜 语法：Shadow(Color=?, Direction=?)
参数和功能：与dropshadow非常相似，也是一种阴影效果。dropshadow没有渐进感，shadow有渐进的阴影感。 参数名称 | 功能 | 参数 | | Color | 指定阴影的颜色 | RGB格式的颜色值 | | Direction | 指定阴影的方向 | 0：垂直向上；每45度为一个单位 |
示范： | Shadow(Color=000000, Direction=0) |
Wave滤镜
语法：Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)
参数和功能：使对象在垂直方向上产生波浪的变形效果。
参数名称 | 功能 | 参数 | | Add | 表示是否显示原对象 | 0：不显示；1：显示 | | Freq | 设置波动的数量 | 自然数 | | LightStrength | 设置波浪效果的光照强度 | 0－100，1为最弱，100为最强 | | Phase | 波浪的起始相位 | 0-100 | | Strength | 设置波浪摇摆的幅度 | 自然数 |
示范：
| wave(add=true,freq=3,lightstrength=100,phase=45,strength=5) |
X-ray滤镜
无任何参数。使图片只显示其轮廓。
以上我们学习了css的静态滤镜。除了这些之外，css还包含两种动态滤镜，BlendTrans混合转换滤镜和Revealtrans显示转换滤镜。这两类滤镜不能单独在htnl中调用，必须要结合在scripts程序中，由spripts程序对其进行控制。所以要使用动态滤镜，必须要会spripts编程。不过，我们可以在网上找到很多现成的javascripts来使用，在这里就不多说了。
|
