第9章 CSS滤镜介绍演示文稿.PPTVIP

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