CSS+DIV网页样式与布局——滤镜
滤镜主要是用来实现图像的各种特殊效果。它在PhotoShop中有非常神奇的作用。CSS滤镜的标识符是“filter”，总体上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。css滤镜可以直接作用于对象上，并且立即生效的滤镜成为基本滤镜。而要配合JavaScript等脚本语言，能产生更多变幻效果的则成为高级滤镜。
1、常见滤镜
（1）透明度滤镜
Alpha通道：用于设定透明度。
它的表达式如下：
filter：alpha（opacity=opacity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishY）
其中opacity表示透明度登记，可选值1-100,0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
例：设置50%的透明度
<style>
.alpha{
filter:alpha(opacity=50,style=2,startX=500,startY=20,finishX=530,finishY=50);
}
</style>
<body>
<img src="pikaqiu1.jpg" border="0">
<img src="pikaqiu1.jpg" border="0" class="alpha">
</body>
效果：
Blur滤镜：用户设定模糊度
表达式：blur(pixelradius=4,makeshadow=false)其中pixelradius设置模糊的程度。
例：设置模糊效果
<style>
.blur{
filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);
}
</style>
<body>
<img src="pikaqiu2.jpg">
<img src="pikaqiu2.jpg" class="blur">
</body>
效果：
chroma滤镜：
使用”Chroma'属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。
语法：{filter:chroma(color=color)}
例：对老虎身上的金黄色过滤
<style>
.chroma{
filter:chroma(color=FF6800); /* 去掉金黄色 */
}
</style>
<body>
<img src="tiger.gif">
<img src="tiger.gif" class="chroma">
</body>
效果：
mask滤镜：
语法：{filter:mask(color=color)}
使用'MASK'属性可以为对象建立一个覆盖于表面的膜，其效果就象戴者有色眼镜看物体一样。
例：
<style>
.mask{
filter:mask(color=#8888FF); /* 遮罩效果 */
}
</style>
<body>
<img src="muma.gif">
<img src="muma.gif" class="mask">
</body>
效果：
(2)形状
翻转
Flip：语法：STYLE="filter:fliphflipv"其中fliph代表水平翻转 flipv代表竖直翻转
例：做一个中心对称的水平竖直翻转的效果图。
<style>
.flip1{
filter:fliph; /* 水平翻转 */
}
.flip2{
filter:flipv; /* 竖直翻转 */
}
.flip3{
filter:flipv fliph; /* 水平、竖直同时翻转 */
}
</style>
<body>
<img src="building4.jpg"><img src="building4.jpg" class="flip1"><br>
<img src="building4.jpg" class="flip2"><img src="building4.jpg" class="flip3">
</body>
效果：
波浪
语法：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")
（3）其他滤镜
Shadow 滤镜
语法：{filter:shadow(color=color,direction=direction)}
利用“Shadow”属性可以在指定的方向建立物体的投影，COLOR是投影色，DIRECTION是设置投影的方向。其中0度代表垂直向上，然后每45度为一个单位。它的默认值是向左的270度。
Gray ,Invert,Xray 滤镜
语法：{filter:gray},{filter:invert},{filter:xray}
Gray滤镜是把一张图片变成灰度图；（汶川大地震后很多网站色调都变灰色，就是用的这一点代码实现的）
Invert滤镜是把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值；
Xray滤镜是让对象反映出它的轮廓并把这些轮廓加亮，也就是所谓的“X”光片。
Glow 滤镜
语法：{filter:glow(color=color,strength)}
当对一个对象使用'glow'属性后，这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。
（4）更多的滤镜：
Chroma：把指定的颜色设置为透明
DropShadow：建立一种偏移的影象轮廓，即投射阴影
Grayscale：降低图片的彩色度
Invert：将色彩、饱和度以及亮度值完全反转建立底片效果
Light：在一个对象上进行灯光投影
其实CSS滤镜并不适用于所有的浏览器，很多滤镜效果有一定的兼容性浏览器的限制。但是滤镜的效果是使我们的网页图片达到更多的效果，要想恰到好处的使用滤镜，除了平常的美术功底之外，还需要一定的熟悉和操控能力，甚至要具有很丰富的想象力。这样，才能有的放矢的应用滤镜，发挥出艺术才华。