第12章--CSS滤镜.ppt

《第12章--CSS滤镜.ppt》由会员分享，可在线阅读，更多相关《第12章--CSS滤镜.ppt（16页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第12章CSS滤镜CSS滤镜是微软公司开发的整合在IE浏览器中的功能。所谓滤镜就是对图片产生一定的图形变换效果。由于这套CSS滤镜的版权属于微软公司，所以其他浏览器不能有效支持。但是IE浏览器与Windows系统捆绑，在全球广泛运用，因此许多网页设计师都经常使用CSS滤镜来为图片增效。本章内容包括：介绍滤镜概述介绍常用CSS滤镜12.1滤镜概述最早的滤镜概念来自于摄影业，通常指安装在相机镜头前用于过滤自然光的附加镜头。所以最早的滤镜是为了实现照片的某些特殊效果而出现的附加镜头。后来在图片处理软件如photoshop中也有了滤镜的概念，PS中的滤镜主要是用来实现图像的各种特殊效果。它在Photo

2、shop中具有非常神奇的作用。滤镜通常需要同通道、图层等联合使用，才能取得最佳艺术效果。而网页中的滤镜并不是浏览器的插件，也不符合CSS标准，而是微软公司为增强浏览器功能而特意开发的并整合在IE浏览器中的功能的集合。由于IE浏览器有着很广的使用范围，因此CSS滤镜也被广大设计者所喜爱。12.2常用CSS滤镜上一节简要介绍了什么是网页滤镜以及其语法格式，本节来介绍一下常见的滤镜种类。主要讲述以下滤镜：透明层次滤镜（alpha）、颜色透明滤镜（chroma）、模糊滤镜（blur）、固定阴影滤镜（dropshadow）、移动阴影滤镜（shadow）、光晕滤镜（glow）、灰度滤镜（gray）、反色滤

3、镜（invert）、镜像滤镜（flip）、遮罩滤镜（mask）、X射线滤镜（x-ray）、和波纹滤镜（wave）。12.2.1 透明层次滤镜透明层次滤镜alpha用于设置透明度，alpha滤镜包含七个参数，分别起到透明等级、透明的变化方式、变化的范围设置作用，如下所示：filter:alpha(opacity=a,/*透明度等级*/finishopacity=b,/*结束时的透明度*/style=c,/*透明的变化方式*/startX=d,/*开始变化的X轴起点*/startY=e,/*开始变化的Y轴起点*/finishX=f,/*结束变化的X轴终点*/finishiY=g,);/*结束变化的

4、Y轴终点*/以上参数，前三个指代透明的相应效果以及透明的变化方式，后四个指代起始坐标。12.2.2 颜色透明滤镜颜色透明滤镜chroma就像滤光镜一样，把制定的颜色给滤掉，而透明层次滤镜alpha用于设置整张图片的透明度。以下是chroma的通用语法：filter:chroma(color=colorname);其中colorname为某种颜色的名称。例如设置colorname为red，可以把图片中的红色去掉。要注意的是，若要用十六进制表示颜色时，注意带#号。12.2.3 模糊滤镜（Blur）有时候网页设计需要一种雾里看花的效果，这时候往往会考虑到模糊滤镜，其能使图片变得朦胧，以下是blur的

5、通用语法：filter:blur(add=ture/false,direction=b,strength=c);blur属性有三个参数：add、direction和strength。其中add参数是用来设置是否显示被模糊的对象。add可以设置为1或者0，0表示不显示原来对象，1表示要显示原来对象。add参数也可以用true和false判断值来表示。在默认情况下，add值是1，即为ture。direction参数用来设置模糊的方向，模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度为一个单位，默认值是向左的270度。注意：Direction的取值范围是0到315度。strength参

6、数值代表有多少像素的宽度将受到模糊影响，只能使用整数来设置，其默认值是5像素。12.2.4 固定阴影滤镜（dropshadow）有时候为产生阴影，又需要不能模糊主体对象，这时候我们就会用固定阴影滤镜dropshadow，以下是dropshadow的通用语法：filter:dropshadow(color=a,offx=b,offy=c,positive=d);dropshadow属性是为了添加对象的下落式阴影效果。其实现的效果外观上像原来的对象离开页面，然后在页面上显示出该对象的投影。该属性一共有四个参数，color代表投射阴影的颜色，要十六进制颜色格式表示颜色值。offx和offy分别指定横

7、向x轴和纵向y轴阴影的偏移像素值，必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向，设置为负整数则相反。参数positive用于指定阴影的不透明度。0 表示透明，没有阴影效果；非 0 表示显示阴影效果。另外，也可以用布尔值来表示：True代表非 0；false代表 0。12.2.5移动阴影滤镜（shadow）使用固定阴影滤镜产生的阴影是实边的，其实就是原来文字本体的一个复制阴影。要使产生的阴影具有渐进的效果，就要使用移动阴影滤镜shadow。使用该滤镜产生的阴影看起来更和谐，以下是shadow的通用语法：filter:shadow(color=a,direction=b)

8、;shadow滤镜包含两个参数，其中color值是用来设置阴影的颜色，要用十六进制颜色表示。direction值用来设定投影的方向，其效果是按顺时针方向进行。其中0度代表垂直向上，每45度为一个单位，默认值是的135度。direction的取值范围是0到315度。12.2.6 光晕滤镜（glow）有时候为了让网页上的文字或图片有环绕或光晕的效果，我们常常使用光晕滤镜glow，其用语法如下：filter:glow(color=a,strength=b);glow滤镜包含两个参数，其中color值是用来设置发光的颜色，要用十六进制颜色表示。参数strength指定发光的强度，参数值从1到255，数

9、字越大光的效果越强，反之则弱。12.2.7 灰度滤镜（gray）有时候在特殊时期或表现特殊的主题，需要把彩色图片变成黑白图片，这时候我们通常使用灰度滤镜（gray），gray滤镜没有参数，其通用语法如下：filter:gray;12.2.8 反色滤镜（invert）反色滤镜invert可以把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值等。当这个滤镜作用于彩色照片上，就会产生像照片负片一样的效果。invert滤镜没有参数，其通用语法如下：filter:invert;12.2.9镜像滤镜（flip）当我们在网页上布置成对的图片时，当制作好一边时，就通过使用翻转复制方法，得到另一边。镜像滤镜

10、就是用于将图片或者文字翻转，翻转的方向可以是水平或垂直。镜像滤镜没有参数其通用语法如下：filter:fliph;/*设置对象水平翻转*/filter:flipv;/*设置对象垂直翻转*/filter:fliph flipv;/*设置对象水平方向垂直方向都翻转*/12.2.10遮罩滤镜（mask）遮罩滤镜mask滤镜将对文档中的元素添加一个矩形遮罩。mask滤镜使被遮罩透明元素成为实心的，实心元素成为透明的，其通用语法如下：filter:mask(color=a);注意：其中color值用于指定遮罩的颜色，可以使用十六进制颜色格式。12.2.11x射线滤镜（x-ray）大家都看过x光片，轮廓特

11、别明亮，CSS滤镜里就有一个x射线滤镜，其也能让对象反映出它的轮廓并把这些轮廓加亮，就像照x光片一样。该滤镜没有参数，其通用语法如下：filter:xray;12.2.12波纹滤镜（wave）我们制作图片效果，有时希望景象有扭动的动感，这是就会考虑波纹滤镜。波纹滤镜wave能让元素在垂直方向产生波纹状的变形，其通用语法如下：filter:wave(add=a,freq=b,lightstrength=c,phase=d,strength=e)其中参数add用于设置是否显示原对象。取0值（false）表示不显示，取非0值（ture）表示要显示原对象。参数freq用于设置波动的个数，通过该值来指定一个对象要产生多少个完整的波纹形状。参数lightstrength用于设置对波浪的光照强度，取值范围从0 到100，数值越大表示光照越强。说明：参数phase用于设置波浪的起始相角，取值范围是0到100的百分数值。参数strength用于代表波的振幅大小，取值为自然数。12.3 小结本章讲解了CSS滤镜的用法。CSS滤镜只有在IE浏览器上才能生效，大部分滤镜能应用到文字和图片中。本章的重点是在应用滤镜时要区分不同滤镜的效果。本章的难点是对滤镜的各个参数的理解和运用。各位读者在实际使用时可以根据需要选择合适的滤镜来实现不同的效果。