第9章CSS滤镜介绍?本章介绍如何在网页中利用CSS技术对元素增加滤镜效果。?滤镜这个词语来源于摄影中的滤光镜，简单的说，滤光镜就是拍摄时放在照相机镜头前面的一块玻璃片或者塑料片。滤光镜虽然形形色色，种类很多，但大体可以分为三大类，即可以用来校正照片外观的滤光镜，用来加强某种效果的滤光镜以及用于产生特殊拍摄效果的滤光镜。后来这样的概念被应用在了图片处理软件中，比如著名的Photoshop，就有很多的滤镜用来对图片进行处理。CSS滤镜和Photoshop滤镜的作用类似，但是它特别针对网页元素，不仅限于图片等进行特殊处理从而达到特殊的艺术效果。?CSS滤镜共可以分为界面滤镜，静态滤镜和动态滤镜三种。作为初学者，我们首先将学习一下如何使用静态滤镜，这包括Alpha滤镜，Blur滤镜，Chroma滤镜，DropShadow滤镜等。掌握了静态滤镜之后，在本章的后半部分，我们还将介绍动态滤镜和界面滤镜。结合不同的滤镜技术，我们的网页可以呈现出非常酷眩的效果。9.1CSS滤镜概述?滤镜是CSS中相对独立的组成部分，它将特定的效果应用于文本容器，图片和网页上的其他对象。滤镜通常是用Filter关键字在属性中定义的，但是需要注意的是滤镜有两种写法。9.1.1滤镜的编写规范与分类?根据IE版本的不同，滤镜的写法也有所不同，具体可以分为两类：?对于IE4.0至IE5版本就支持的滤镜，基本格式如下:?Filter:滤镜名称(参数)?而对于IE5.5及以上版本开始支持的滤镜，编写方式如下:?filter:progid:DXImageTransform.Microsoft.滤镜名称(参数)?在这里progid:DXImageTransform.Microsoft是告知浏览器滤镜的显示需要用到DXImageTransform，也就是MicrosoftDirectXImageTransform这个ActiveX对象来处理。作为初学者，我们不需要知道那么多深入的细节，只需要记住这个形式并且会用就可以了。9.1.2在网页中增加滤镜?现在有一个网页，显示了同事们周末爬山的照片。我们很希望页面能够活泼一些，不用修改页面上的图片，就能获得类似Photoshop处理的效果，滤镜就是实现这个目标的途径。举例来说，有这样一个网页，如代码。给照片增加阴影滤镜效果9.2透明度的问题:alpha通道?Alpha通道滤镜可以用于为可视对象设置透明度效果。通过对alpha设置不同的参数值，能够实现不同的效果。9.2.1Alpha滤镜的属性设置?Alpha滤镜有若干个属性需要设置，它们分别是，?Opacity：Opacity在英文中就是不透明的意思，使用这个参数，可以控制属性限制的元素的透明度。默认的值范围是从0到100，它表示了不透明程度的大小或者百分比。当值为100的时候则代表完全不透明。?FinishOpacity：大家可能注意到了Vista的桌面工具栏都是具有渐变的颜色的，这样更有立体的效果。我们在网页中也完全可以实现类似的效果，答案就是使用FinishOpacity属性。顾名思义，Finish是结束，终点的意思，因此，这个属性可以用来指定渐变效果结束时的透明度。这个参数的取值范围也是0到100。?但是我们单独使用FinishOpacity属性是没有用处的，因为我们还需要告诉浏览器我们要使用渐变，然后浏览器才知道要去寻找FinishOpacity的值。9.2.2Alpha滤镜的实际例子?代码显示了一个复杂的渐变效果。?代码对图片指定区域增加Alpha滤镜效果的代码：alpha-2.html???IMG{filter:alpha(opacity:10,style=2,finishiopacity:90);}???同事周末爬山??对图片应用Alpha滤镜9.3朦胧的美:blur?Blur滤镜可以为网页上的可视对象设置模糊朦胧的效果。如果说上面的Alpha滤镜是给元素遮上了一层薄纱，并不改变元素本身的清晰度的话，这里的Blur则是将元素模糊虚化，呈现在我们的眼中则是类似元素在快速运动中，我们只能看清楚基本轮廓的效果。?图9-4显示了用画图软件Fireworks对字体进行Blur处理之前和之后的一个效果。图片处理软件中的Blur效果9.4增加透明色效果(Chroma)?Chroma滤镜是用来将网页中可视对象的某种颜色指定为透明色。根据这个定义，我们可以想见该滤镜只