《第9章css滤镜介绍》

《《第9章css滤镜介绍》》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第9章CSS滤镜介绍本章介绍如何在网页中利用CSS技术对元素增加滤镜效果。滤镜这个词语来源于摄影中的滤光镜，简单的说，滤光镜就是拍摄时放在照相机镜头前面的一块玻璃片或者塑料片。滤光镜虽然形形色色，种类很多，但大体可以分为三大类，即可以用来校正照片外观的滤光镜，用来加强某种效果的滤光镜以及用于产生特殊拍摄效果的滤光镜。后来这样的概念被应用在了图片处理软件中，比如著名的Photoshop，就有很多的滤镜用来对图片进行处理。CSS滤镜和Photoshop滤镜的作用类似，但是它特别针对网页元素，不仅限于图片等进行特殊处理从而达到特殊的艺术效果。CSS滤镜共可以分为界面

2、滤镜，静态滤镜和动态滤镜三种。作为初学者，我们首先将学习一下如何使用静态滤镜，这包括Alpha滤镜，Blur滤镜，Chroma滤镜，DropShadow滤镜等。掌握了静态滤镜之后，在本章的后半部分，我们还将介绍动态滤镜和界面滤镜。结合不同的滤镜技术，我们的网页可以呈现出非常酷眩的效果。9.1CSS滤镜概述滤镜是CSS中相对独立的组成部分，它将特定的效果应用于文本容器，图片和网页上的其他对象。滤镜通常是用Filter关键字在属性中定义的，但是需要注意的是滤镜有两种写法。9.1.1滤镜的编写规范与分类根据IE版本的不同，滤镜的写法也有所不同，具体可以分为两类：对于

3、IE4.0至IE5版本就支持的滤镜，基本格式如下:Filter:滤镜名称(参数)而对于IE5.5及以上版本开始支持的滤镜，编写方式如下:filter:progid:DXImageTransform.Microsoft.滤镜名称(参数)在这里progid:DXImageTransform.Microsoft是告知浏览器滤镜的显示需要用到DXImageTransform，也就是MicrosoftDirectXImageTransform这个ActiveX对象来处理。作为初学者，我们不需要知道那么多深入的细节，只需要记住这个形式并且会用就可以了。9.1.2在网页中增

4、加滤镜现在有一个网页，显示了同事们周末爬山的照片。我们很希望页面能够活泼一些，不用修改页面上的图片，就能获得类似Photoshop处理的效果，滤镜就是实现这个目标的途径。举例来说，有这样一个网页，如代码。给照片增加阴影滤镜效果9.2透明度的问题:alpha通道Alpha通道滤镜可以用于为可视对象设置透明度效果。通过对alpha设置不同的参数值，能够实现不同的效果。9.2.1Alpha滤镜的属性设置Alpha滤镜有若干个属性需要设置，它们分别是，Opacity：Opacity在英文中就是不透明的意思，使用这个参数，可以控制属性限制的元素的透明度。默认的值范围是从

5、0到100，它表示了不透明程度的大小或者百分比。当值为100的时候则代表完全不透明。FinishOpacity：大家可能注意到了Vista的桌面工具栏都是具有渐变的颜色的，这样更有立体的效果。我们在网页中也完全可以实现类似的效果，答案就是使用FinishOpacity属性。顾名思义，Finish是结束，终点的意思，因此，这个属性可以用来指定渐变效果结束时的透明度。这个参数的取值范围也是0到100。但是我们单独使用FinishOpacity属性是没有用处的，因为我们还需要告诉浏览器我们要使用渐变，然后浏览器才知道要去寻找FinishOpacity的值。9.2.2

6、Alpha滤镜的实际例子代码显示了一个复杂的渐变效果。代码对图片指定区域增加Alpha滤镜效果的代码：alpha-2.html同事周末爬山对图片应用Alpha滤镜9.3朦胧的美:blurBlur滤镜可以为网页上的可视对象设置模糊朦胧的效果。如果说上面的Alpha滤镜是给元素遮上了一层薄纱，并不改变元素本身的清晰度的话，这里的Blur则是将元素

7、模糊虚化，呈现在我们的眼中则是类似元素在快速运动中，我们只能看清楚基本轮廓的效果。图9-4显示了用画图软件Fireworks对字体进行Blur处理之前和之后的一个效果。图片处理软件中的Blur效果9.4增加透明色效果(Chroma)Chroma滤镜是用来将网页中可视对象的某种颜色指定为透明色。根据这个定义，我们可以想见该滤镜只有一个参数Color，用于指定需要变化的颜色。图是对网页图片和按钮应用了Chroma滤镜的显示效果。为按钮和图片增加透明色效果9.5下落的阴影(DropShadow)DropShadow顾名思义就是下落的阴影，可以为网页上的可见对象，一般

8、是文字，创建阴影效果。不过这种阴影和我