第8章 CSS滤镜
透明滤镜
前面说的CSS样式表不仅能用于文字，还可用样式表控制图像。
选择菜单“文本→CSS样式→新建CSS样式”，在“新建CSS样式”对话框中，名称输入“.img”，类型选择“自定义样式”，“定义在”选项中，选择“仅对该文档”，按“确定”按钮，在弹出“CSS样式定义”对话框，在左边分类列表框中选择“扩展”，右边的“过滤器”框内就放着很多图像处理样式，我们仿照photoshop中图像处理命令把他们称做“滤镜”。
滤镜用法可简可繁，各种参数很难以用语言表达，本讲先叙述第一个滤镜“Alpha”。以前学过Flash的都知道“Alpha”是设置透明度的，这里同样是让图像或文字产生不同程度的透明效果。“Alpha”的设置参数如下：
Alpha(Opacity=?, FinishOpacity=?, Style=?,StartX=?, StartY=?, FinishX=?, FinishY=?)
该项参数最长，在框中不能完全显示，可先用鼠标定位在框中，然后用左右方向键移动。是不是又有人说头大了！其实说明了就很简单。
参数里第一项“Opacity=?”是主参数，设置透明度为多少，把?号换成数字就行了。和Flash一样，“100”为全不透明，就是看不到图像下面的任何内容；“0”为完全透明，就是看不到图像了。
后面的参数是可选项，需要某项就把某项的？换成相应的数字，不需要的项删除。下面分别叙述：
“FinishOpacity=?”是渐变透明度，可输入值也是0～100 。
“Style=?”是渐变类型，“1”是线性渐变；“2”是圆形辐射渐变；“3”是距形辐射渐变。
如果设置了线性渐变，可由“StartX=?”“StartY=?”定义渐变开始点，由“FinishX=?”“FinishY=?”定义渐变结束点。
看下面网页：
第一幅“正常图片”没有用样式表。以下图片样式表中的参数都在图片上方。
上面网页中(图一)是正常的图片。
(图二)设置Alpha(Opacity=60)，图像透明度为60，不用“渐变”效果，其余项删除。
(图三)设置Alpha(Opacity=0, FinishOpacity=100, Style=1,StartX=0, StartY=0, FinishX=260, FinishY=200) ，其中“Style=1”是线性渐变；渐变开始点“Opacity=0”是全透明；渐变结束点“FinishOpacity=100”是完全不透明；开始点位置“StartX=0”“StartY=0”是图片左上角；结束点位置“FinishX=260”“FinishY=200”是图片右下角。
(图四)设置Alpha(Opacity=100, FinishOpacity=0, Style=2)，“Style=2”是圆形辐射渐变，辐射渐变是以中心向周围渐变，起始点参数没用。“Opacity=100”图像中心完全不透明；“FinishOpacity=0”图像外边沿完全透明。
(图五)设置Alpha(Opacity=10, FinishOpacity=100, Style=2)，“Opacity=0”图像中心完全透明；“FinishOpacity=100”图像外边沿完全不透明。
(图六)设置Alpha(Opacity=100, FinishOpacity=0, Style=3)，“Style=3”是距形辐射渐变，“Opacity=100”图像中心完全不透明；“FinishOpacity=0”图像外边沿完全透明。
样式表定义好后，先选中图片，再选择菜单“文本→CSS样式”，选中“.img”样式表就可以了。要说明的是，样式表中的滤镜效果在编辑页面中不显示，只有保存好的网页在浏览器中才能显示。
滤镜也可作用于文字。但对于文字对象编辑样式表时，要在左边分类列表框中选择“盒子”，右边参数中输入“高”或“宽”的值。
风吹模糊
前一讲我们通过“Alpha”应用详细叙述了滤镜参数的输入方法，大家掌握了这些，其他滤镜操作也都相似，下面只叙述这些滤镜参数的功能，具体操作就不再详细叙述。
“Blur(Add=?, Direction=?, Strength=?)”
Blur滤镜产生像被风一样的模糊效果。“Add=1”保留原对象，“Add=0”不保留原对象。
“Direction=?”模糊方向，以45度为单位改变，“0”为垂直向上，“45”向右上，“90”水平向右，“135”向右下，以依次改变。
“Strength=?”输入模糊像素数。如下例：
阴影滤镜
阴影滤镜基本格式：DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
DropShadow滤镜在图像透明与不透明交界处产生阴影。
“Color=?”阴影颜色。
“OffX=?, OffY=?”在x轴向和y轴向产生阴影的宽度(值为负数则在相反方向产生阴影)。
“Positive=1”在不透明边界以定义颜色产生阴影；“Positive=0”以定义颜色填充透明部分，边界处产生透明阴影。如下例：
立体阴影效果：Shadow(Color=?, Direction=?)
Shadow产生和上例相似的阴影，但只有颜色和方向两个参数。“Direction=?”和模糊参数相同。
透明背景滤镜
基本格式：Chroma(Color=?)
Chroma滤镜使图像中某一种颜色变成透明。
下例动画中跳舞女孩有白色背景，为了得到背景的色值，可以先导入Photoshop或Flash场景，用“吸管”工具取得背景色，然后查看颜色的十六进制值。经测该；图背景色值是“fefefe”，使用滤镜代码“Chroma(Color=fefefe)”，下例中左图未加载样式表，右图加载了样式表。
辉光滤镜
基本格式：Glow(Color=?, Strength=?)
Glow滤镜在图像透明与不透明交界处产生发光效果。
“Color=?”定义发光颜色，“Strength=?”定义发光范围。
变幻颜色滤镜
遮罩滤镜：Mask(Color=?)
遮罩的功能是使被遮对象不透明的变成透明，透明的地方用所选择颜色填充。
该项只有一个参数“Color=?”把?号换成相应的颜色值就行。下例中分别为用红、蓝、紫遮罩的文字，最下是遮罩的一个图片。
去色滤镜：Gray
把彩色图片变成灰度图片。如下页中图2所示。
反相滤镜：Invert
把图像变成相反的颜色(像彩色照片的底片一样)。如下页中图3所示。
黑白反相：Xray
把图片去掉颜色反相显示。如下页中图4所示。
波浪变形滤镜
“Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)”滤镜，可以在对象上产生波浪变形。“Add=1”表示显示原对象，“Add=0”表示不显示原对象;“Freq=?” 设置波的个数；“LightStrength=?” 设置波的光照强度；“Phase=?” 波浪的起始相角；“Strength=?” 设置波的摇摆幅度。如下图文字滤镜的设置：Wave(Add=0,Freq=2,LightStrength=0,Phase=0,Strength=3)。
还要提醒注意，滤镜用于文字时不要忘记在“盒子”类里输入高度。
上例中图片倒影的制作，使用了垂直反转滤镜，“ FlipV”(垂直反转)，就是把图像反转显示，另外还有一个“FlipH”(水平反转)，因也不用加参数，不再作出示范了。
上例中图片倒影的制作，显然在下面的图片中加了三个滤镜，一个是垂直反转滤镜，一个是波浪变形，一个线性渐变。下面看怎样在一个样式表中定义三个滤镜。
选择菜单“文本→CSS样式→新建CSS样式”，在“新建CSS样式”对话框中，名称输入“.img”，类型选择“自定义样式”，“定义在”选项中，选择“仅对该文档”，按“确定”按钮，在弹出“CSS样式定义”对话框，在左边分类列表框中选择“扩展”，右边滤镜选择“ FlipV”。
再建立样式表“.img1”，滤镜选择“Wave”参数输入(Add=0, Freq=10, LightStrength=50, Phase=0, Strength=5)，
接着再建立样式表“.img2”，选择透明线性渐变，参数：
Alpha(Opacity=90, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=180)
保存后，打开源代码视图，可以看到三个样式表。把上面“.img”样式表尾部的分号和后半个花括号删除，把下面“.img1”样式表名称和前半个花括号以及“filter:”都删除，把“.img1”尾部分号和花括号删除，把“.img2”前部分名称、括号及“filter:”都删除，最后合并成一个样式表，代码如下：
.img {
filter: FlipV
Wave(Add=0, Freq=10, LightStrength=50, Phase=0, Strength=5)
Alpha(Opacity=90, FinishOpacity=0, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=180);
}
这样一个样式表中就包括三个滤镜。把该样式表加载到下面一幅图片上就好了。
当然也可以从其他文件中复制滤镜代码，粘贴到当前样式表中。
上例图片在属性面板中，要把两图片的垂直间距都设置为“0”，以免两图片不相连。
页面最下行文字，是用同样方法在波浪变形样式表中又合并了阴影滤镜。
学习了这个方法，你还可以更多个滤镜都合并到一个样式表中，但有时会有冲突，如果遇到不显示出所需要的效果时，把合并进去的内容删除就行了。