学用CSS处Web图像
网络通信
我们平时较多利用CSS来对网页文字、表格以及背景颜色的控制，而对于CSS的图像处理功能用得并不是很多，其实CSS的图像处理功能也是很强大的。CSS中用于图像处理的功能叫滤镜。正是因为有了滤镜功能，才使得CSS可以实现类似图像处理软件才能达到的图像处理效果，下面就让我们看一看它的神奇效果吧。
一、透明效果
在Dreamweaver软件中可以实现图像处理的CSS滤镜有16种，其中包括我们在图像处理软件中常用到的透明、渐变、阴影以及设置灰度等等。下面是设置透明图像效果的操作步骤。
打开Dreamweaver MX 2004的CSS设计器，新建一个名为fiter的样式，在弹出的对话框中选择扩展类型，对各属性进行填写。选择过滤器下拉选项的第一项Alpha，表达式如下填写 ：alpha(opacity=?,finish opacity=?,style=?,startX=?,startY=?,fin ishX=?,finishY=?)。其中“?”部分根据实际所需效果填入阿拉伯数字(图1)。
参数说明：第一项opacity是指图像的透明度，数值为0～100，如果填写0则表示完全透明；Finishopacity是对结束时的透明度进行设置，用于实现渐变透明的效果，数值为0～100；style则是渐变的类型，填写0则是统一形状，1是线性渐变，2是放射渐变，3是菱形渐变；而后面的startX、startY、finishX、finishY则分别是渐变开始处的坐标，以及渐变结束时的坐标。
现在对图片加上这个CSS的样式，按F12键浏览效果(图2)。是不是已经产生变化了？设置就是这么简单，仅用一行代码就实现了图像的处理。
二、模糊效果
下面是Blur滤镜产生的模糊效果(图3)。按照上面的步骤进入CSS样式定义窗口。过滤器blur的表达式为blur(add=?,di rection=?,strength=?)，我们设置add=ture、direction=90、strength=40。
参数说明：add是一个布尔变量，只有ture和false两项，表示图像是否改变为模糊样式；direction则是对模糊的方向进行控制，方向由0开始每45为一个单位顺时针变化。Strength是指模糊的程度，数值需要使用整数。
还有其他一些更为实用的效果，如选择Xray，让图像实现X光效果，只显示轮廓样式等。
还有图像的水平、垂直翻转等效果。
编后 通过上面的一些讲解，相信大家对CSS在图像处理方面的应用已经有一定的了解。值得注意的是CSS对图像进行处理只是通过程序来进行控制，并未对图像本身进行任何改变，一旦取消CSS样式，图像就会恢复原样，相比起图像处理软件来说，显然CSS样式更加灵活一些。希望网页制作爱好者能够深刻体会到CSS样式在网页中的强大功能，灵活运用到自己的网页设计中去，制作出个性化的网站来！