第9章 CSS滤镜介绍

null第9章 CSS滤镜介绍第9章 CSS滤镜介绍本章介绍如何在网页中利用CSS技术对元素增加滤镜效果。 滤镜这个词语来源于摄影中的滤光镜，简单的说，滤光镜就是拍摄时放在照相机镜头前面的一块玻璃片或者塑料片。滤光镜虽然形形色色，种类很多，但大体可以分为三大类，即可以用来校正照片外观的滤光镜，用来加强某种效果的滤光镜以及用于产生特殊拍摄效果的滤光镜。后来这样的概念被应用在了图片处理软件中，比如著名的Photoshop，就有很多的滤镜用来对图片进行处理。CSS滤镜和Photoshop滤镜的作用类似，但是它特别针对网页元素，不仅限于图片等进行特殊处理从而达到特殊的艺术效果。 CSS滤镜共可以分为界面滤镜，静态滤镜和动态滤镜三种。作为初学者，我们首先将学习一下如何使用静态滤镜，这包括Alpha滤镜，Blur滤镜，Chroma滤镜，DropShadow滤镜等。掌握了静态滤镜之后，在本章的后半部分，我们还将介绍动态滤镜和界面滤镜。结合不同的滤镜技术，我们的网页可以呈现出非常酷眩的效果。 9.1 CSS滤镜概述9.1 CSS滤镜概述滤镜是CSS中相对独立的组成部分，它将特定的效果应用于文本容器，图片和网页上的其他对象。滤镜通常是用Filter关键字在属性中定义的，但是需要注意的是滤镜有两种写法。9.1.1 滤镜的编写 规范 编程规范下载gsp规范下载钢格栅规范下载警徽规范下载建设厅规范下载 与分类9.1.1 滤镜的编写规范与分类根据IE版本的不同，滤镜的写法也有所不同，具体可以分为两类： 对于IE4.0至IE5版本就支持的滤镜，基本 格式 pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载 如下: Filter:滤镜名称(参数) 而对于IE5.5及以上版本开始支持的滤镜，编写方式如下: filter : progid:DXImageTransform.Microsoft.滤镜名称(参数) 在这里progid:DXImageTransform.Microsoft是告知浏览器滤镜的显示需要用到DXImageTransform，也就是Microsoft DirectX Image Transform这个ActiveX对象来处理。作为初学者，我们不需要知道那么多深入的细节，只需要记住这个形式并且会用就可以了。9.1.2 在网页中增加滤镜9.1.2 在网页中增加滤镜现在有一个网页，显示了同事们周末爬山的照片。我们很希望页面能够活泼一些，不用修改页面上的图片，就能获得类似Photoshop处理的效果，滤镜就是实现这个目标的途径。举例来说，有这样一个网页，如代码。 给照片增加阴影滤镜效果 9.2 透明度的问题:alpha通道9.2 透明度的问题:alpha通道Alpha通道滤镜可以用于为可视对象设置透明度效果。通过对alpha设置不同的参数值，能够实现不同的效果。9.2.1 Alpha滤镜的属性设置9.2.1 Alpha滤镜的属性设置Alpha滤镜有若干个属性需要设置，它们分别是， Opacity：Opacity在英文中就是不透明的意思，使用这个参数，可以控制属性限制的元素的透明度。默认的值范围是从0到100，它表示了不透明程度的大小或者百分比。当值为100的时候则代表完全不透明。 FinishOpacity：大家可能注意到了Vista的桌面工具栏都是具有渐变的颜色的，这样更有立体的效果。我们在网页中也完全可以实现类似的效果，答案就是使用FinishOpacity属性。顾名思义，Finish是结束，终点的意思，因此，这个属性可以用来指定渐变效果结束时的透明度。这个参数的取值范围也是0到100。 但是我们单独使用FinishOpacity属性是没有用处的，因为我们还需要告诉浏览器我们要使用渐变，然后浏览器才知道要去寻找FinishOpacity的值。9.2.2 Alpha滤镜的实际例子9.2.2 Alpha滤镜的实际例子代码显示了一个复杂的渐变效果。 代码 对图片指定区域增加Alpha滤镜效果的代码：alpha-2.html 同事周末爬山 对图片应用Alpha滤镜 9.3 朦胧的美:blur9.3 朦胧的美:blurBlur滤镜可以为网页上的可视对象设置模糊朦胧的效果。如果说上面的Alpha滤镜是给元素遮上了一层薄纱，并不改变元素本身的清晰度的话，这里的Blur则是将元素模糊虚化，呈现在我们的眼中则是类似元素在快速运动中，我们只能看清楚基本轮廓的效果。 图9-4显示了用画图软件Fireworks对字体进行Blur处理之前和之后的一个效果。图片处理软件中的Blur效果 9.4 增加透明色效果(Chroma)9.4 增加透明色效果(Chroma)Chroma滤镜是用来将网页中可视对象的某种颜色指定为透明色。根据这个定义，我们可以想见该滤镜只有一个参数Color，用于指定需要变化的颜色。图是对网页图片和按钮应用了Chroma滤镜的显示效果。为按钮和图片增加透明色效果 9.5 下落的阴影(Drop Shadow)9.5 下落的阴影(Drop Shadow)Drop Shadow顾名思义就是下落的阴影，可以为网页上的可见对象，一般是文字，创建阴影效果。不过这种阴影和我们后面要介绍的Shadow滤镜不同，DropShadow滤镜应用的对象是浮在阴影上方的，和阴影没有关联，而Shadow滤镜则是阴影和本体相连接的。实际显示的效果和Blur有点类似，如图所示。DropShadow滤镜效果 9.6 浮雕纹理（Emboss和Engrave)9.6 浮雕纹理（Emboss和Engrave)Emboss和Engrave也是非常有意思的滤镜，他们能够给元素创造雕刻的效果，使用得当，人人都可以做网页上的雕塑家。这里，Emboss就是浮雕的意思，使物体的表面凸出。而Engrave则是雕刻的意思，使物体的表面凹进去形成图案。不过实际的使用效果并没有太多的区别，我们就把他们两个放在一节中介绍。 先说Engrave。 在样式表中的写法是这样的： Filter:progid:DXImageTransform.Microsoft.Engrave(enabled=bEnabled, Bias=fBias) 从写法可以看出，Engrave滤镜和我们之前介绍的有所不同，可见这个滤镜是IE5。5以及以后的版本才开始支持的。从括号中我们可以发现Engrave滤镜有Enabled和Bias这样两个参数。 Enabled：这个参数可以不特别指定，用于设置滤镜是否使用，默认值是True。如果不想使用该滤镜，则设置为False。 Bias：这个参数同样是一个可选的设置。参数值是一个浮点数(Float)，也就是说是带小数的数字。Bias用于设置添加到滤镜效果的每种颜色组分值的百分比。取值范围为 -1.0 – 1.0之间的数字，而默认值是 0.7。如果该参数设置的比较大，则会产生高亮滤光效果。对比度比较高的图片受此滤镜的影响较小。 9.7 给元素增加一些翻转变换（Flip)9.7 给元素增加一些翻转变换（Flip)Flip共有两种滤镜，分别为FlipH和FlipV，代表水平翻转和垂直翻转。这两种滤镜可以为页面上的可见元素建立镜像。所谓镜像，就是我们在镜子中看到的自己。图是网页上对在本章经常作为例子的1.gif应用翻转变换的显示效果。对同一图片应用FlipX和FlipY滤镜的效果 9.8 关于灰度(Gray)9.8 关于灰度(Gray)Gray滤镜用于将彩色图片转换为灰度图，这种效果在有的时候能够创造出一种复古的意味，如图所示。应用Gray滤镜使原始图片变为灰度图片 9.9 霓虹灯:设置光晕(Glow)9.9 霓虹灯:设置光晕(Glow)当晚上我们走在繁华的商业区的时候，每每为闪闪发亮的霓虹灯而吸引。在不少的电影中，霓虹灯也往往作为繁荣，夜生活等等含义的代名词，穿插在段段胶片中。在网页世界里，我们同样可以把页面上的文字点亮，让浏览者有一个不同的心情。 网页上的霓虹灯效果是通过CSS的Glow滤镜来实现的。 图显示了这种霓虹灯的效果，文字的各种光晕效果 9.10 独特的效果:反色(Invert)9.10 独特的效果:反色(Invert)Invert滤镜用于将图片中的色彩，饱和度和亮度都反转，从而创建出底片的效果。该滤镜没有参数。图显示了所设置的反色效果。反色效果 9.11 面纱与遮罩(Mask)9.11 面纱与遮罩(Mask)Mask在英文中就是面具的意思，大家可能还记得金凯利主演的同名影片“面具”吧，金凯利带上神奇的面具后从一个普通的小人物变成具有超强能力的人。在我们的网页中，如果能够用好Mask滤镜，说不定也会达到同样的效果! Mask滤镜的作用在于给可视对象添加膜效果，它具有唯一的参数Color，用于设置面具的颜色。对于网页的浏览者来说，原来的可视对象中透明的像素都变成了面具的颜色，而所有不透明的像素则变为透明。 听起来可能有些抽象，如图所示。图片应用面具滤镜 9.12 运动模糊(Motion Blur)9.12 运动模糊(Motion Blur)我们经常能够看到这样一些摄影作品，运动员在比赛中飞速的奔跑，他的身后好像有风被冲破的痕迹，动感十足。这样的效果就叫做运动模糊。9.12.1 运动模糊滤镜的主要参数9.12.1 运动模糊滤镜的主要参数在网页中，我们同样可以实现运动模糊。将前面章节的Blur.html略作修改，就可以创建运动模糊的滤镜效果， 运动模糊 添加了原图或 原文 少年中国说原文俱舍论原文大医精诚原文注音大学原文和译文对照归藏易原文 字的运动模糊 9.12.2 不同Blur效果的比较9.12.2 不同Blur效果的比较截至目前，我们已经介绍了多种给页面元素增加Blur效果的方法，它们分别是：多种Blur滤镜在IE7中的效果 9.13 让元素更立体：增加阴影(Shadow)9.13 让元素更立体：增加阴影(Shadow)我们在之前的章节中已经介绍了下落的阴影（Drop Shadow），那么本小节即将讲述的Shadow滤镜与前者有什么区别呢？我们不妨通过一个PK来了解各自的特点。 代码包含了Drop Shadow和Shadow两种阴影。阴影大PK的结果 9.14 X射线效果(XRay)9.14 X射线效果(XRay)Xray滤镜用于增强可视对象的轮廓，并将原来对象的彩色信息转变为灰色像素，正如滤镜名字所说的一样，形成了一种X射线的效果。这个滤镜就一个参数Enabled，代表滤镜效果是否打开，默认为True，也就是打开的状态。因此，我们使用的时候可以不指定任何参数，还是非常简单的。 图是应用了XRay滤镜的图片和原始图片的对比，XRay滤镜效果 9.15 给文字增加波浪(Wave)9.15 给文字增加波浪(Wave)Wave滤镜用于为可视对象创建波纹效果，工作原理是使可视对象沿着垂直方向的轴通过正弦曲线的方式来显示。通过对波浪滤镜设置不同的参数，可以获得不同的波纹效果。 Wave滤镜的参数如下： Add：该参数用于设置对象是否要按照正弦波形式显示。默认值为true，也可以设置成false。 Freq：该参数用于设置波形的频率。 Lightstrength：该参数用于设置波形的光影效果。取值为0-100的整数，该数值越大，光影效果就越明显。 Phase：该参数用于设置波形开始时候的偏移量，取值为0-100的整数，表示偏移量取自波长的百分比，具体的含义是这样的：如果数值为50，则表示显示的正弦波从180度的方向开始。 Strength：该参数用于设置波形的振幅。9.16 基本图形滤镜(BasicImage)9.16 基本图形滤镜(BasicImage)前面我们讲过的各种滤镜应用在图片上都能产生有趣的效果，但如果我们需要对图片显示出多种效果，靠滤镜的叠加书写起来就太麻烦了，有没有一次性解决问题的方法呢?答案是肯定的。微软给我们带来了基本图形滤镜，也就是BasicImage。不过注意，这个滤镜是IE5.5以及以上版本才支持的。BasicImage滤镜效果 9.17 动态滤镜9.17 动态滤镜动态滤镜也可以叫做转换滤镜(Transition Filter)，之所以这么称呼它是因为动态滤镜的效果产生于元素内容发生改变的时候，这种改变在网页上实时发生，一般要编程实现，而不像前文所述静态滤镜那样，我们看到的都是效果生效后的网页。 动态滤镜的效果有多种多样，每种效果的参数也比较多，我们在这里介绍其中比较重要的几个，对它们的参数也仅列出对效果影响比较大的部分，剩余的滤镜和参数有兴趣的读者根据已有的规律可以自己研究。9.17.1 转移滤镜的种类9.17.1 转移滤镜的种类包括我们已经见到的revealTrans动态滤镜在内，动态滤镜共有： Barn：模拟开关门效果显示内容。Blinds：百叶窗效果。 CheckerBoard：国际象棋棋盘格效果Fade：淡入淡出效果。 GradientWipe：渐变转换效果Inset：对角线扩张效果。 Iris：快门扩张或者收缩效果。Pixelate：像素化效果 RadialWipe：类似汽车风挡雨刷扫过的效果RandomBars：随机线揭示效果。 RandomDissolve：随机点融化效果。Slide：滑动效果。 Spiral：螺旋动画展示效果。Stretch：拉伸呈现效果。 Strips：条状显现效果。Wheel：轮状显现效果。 Zigzag：崎岖显现效果。BlendTrans：渐隐效果。RevealTrans：可设置24种特效的集合。9.17.2 Barn滤镜9.17.2 Barn滤镜Barn在英文中的意思就是牲口仓或谷仓。那么它和Barn滤镜实际显示的效果有什么关系呢? 我这里先讲一个英语谚语，Close the barn door after the horse escaped。 翻译之后就是“在马跑了之后再来关牲口棚的门”。很显然，这是毫无用处的，中文里也有类似的词语，比如亡羊补牢。可见，Barn和关门还是有很大关系的。 Barn滤镜的使用方法很简单。 filter : progid:DXImageTransform.Microsoft.Barn(enabled=bEnabled, duration=fDuration, motion=sMotion, orientation=sOrientation ) 9.17.3 动态滤镜的特别写法9.17.3 动态滤镜的特别写法从代码中可以看出，动态滤镜的写法与静态滤镜有所不同。动态滤镜在元素内容没有变化的时候是无法发挥作用的。这一点可以通过修改代码来 证明 住所证明下载场所使用证明下载诊断证明下载住所证明下载爱问住所证明下载爱问 。如果将之间的6行代码删除，在浏览器中浏览文件，Barn滤镜并不发挥作用。 使Barn滤镜发挥作用的正是那6行Javascript代码。 （1）首先，document.getElementById(“Img1”)获得了当前网页中Id=Img1的图片对象。 然后调用滤镜的Apply()方法，在Id为Img1的图片上应用滤镜，因为声明的滤镜只有一个，因此filters[0]就代表了Barn滤镜。 （2）再将Img1的图片来源修改为mohu.gif，这就造成了元素内容的改变，Transition发生。Barn滤镜终于可以发挥作用了。 （3）最后再调用滤镜的Play()方法，我们设置好的效果显示了出来。 对于其他的若干种动态滤镜，我们也可以按照相同的思路和步骤来进行编程。但是，由于需要一定的Javascript基础，这种方法还是有一定难度的，我们将在第16章中详细介绍。目前，读者只要能够看懂上面的代码，在实际中能够照搬应用就可以了。9.17.4 RevealTrans动态滤镜9.17.4 RevealTrans动态滤镜RevealTrans这个词是由Reveal(中文意思为显示，展现)和Transition(中文意思为转换)的缩写共同组成的。顾名思义，这个滤镜的作用就是在转换的过程中显示新的图片。RevealTrans滤镜可以实现24种特效，其中包括了很多单一效果的滤镜，因此在实际应用中这种滤镜应用的最多。 RevealTrans滤镜的语法如下： filter:progid:DXImageTransform.Microsoft.RevealTrans(enabled=bEnabled, duration=fDuration, transition=iTransitionType ) 9.17.5 RevealTrans滤镜在网页切换中的应用9.17.5 RevealTrans滤镜在网页切换中的应用值得一提的是，RevealTrans还有另外的一个用处，也就是前面提到的它能够产生网页切换时的特殊效果。 我们有两个简单的网页，分别为Transition-page1.html和Transition-page2.html。离开页面1时产生的滤镜效果 9.18 背景滤镜9.18 背景滤镜背景滤镜一共只有两个，它们分别是AlphaImageLoader和Gradient。在具体学习之前，有必要学习一下相关背景知识--- PNG图片格式。9.18.1 PNG图片格式9.18.1 PNG图片格式在网页中使用的图像格式有很多，像GIF、PNG以及JPEG等，各种格式的优势不尽相同。近年来，随着对GIF使用者收取专利费用，各浏览器对PNG格式越来越好的支持等原因，网络上的GIF图片格式用的越来越少。就GIF来说，PNG图像比GIF图像有更大的优势：有完全的alpha通道，支持更丰富的色彩（GIF图片格式只支持256种颜色），无损压缩能力等。其中最主要的优点之一就是PNG支持完全的透明。9.18.2 AlphaImageLoader滤镜9.18.2 AlphaImageLoader滤镜由于PNG图片格式有很多优点，越来越多的浏览器开始支持它。Firefox以优秀的PNG支持著称，但是IE6则不同，它只能支持完全不透明的PNG，因此即使是包含透明像素的PNG文件，在IE6中也无法看出来。 解决 办法 鲁班奖评选办法下载鲁班奖评选办法下载鲁班奖评选办法下载企业年金办法下载企业年金办法下载 就是应用AlphaImageLoader滤镜。该滤镜可以支持透明度从0到100%的PNG图片。 AlphaImageLoader滤镜的编写方法如下： Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled, sizingMethod=sSize,src=sURL ) 9.18.3 Gradient滤镜9.18.3 Gradient滤镜Gradient滤镜对于设置网页元素的背景是非常有用的。它的写法如下： filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled, startColorStr=iWidth , endColorStr=iWidth ) 滤镜的作用在于在对象的背景和内容之间显示定制的色彩层。当此滤镜效果在显示时，在渐变色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。 滤镜的主要参数： Enabled：该参数设置或查询滤镜是否生效。默认值为True，滤镜生效。当值设置为False时，滤镜无效。 startColorStr：该参数用于设置或查询色彩渐变的开始颜色和透明度。 其格式为#AARRGGBB。AA、RR、GG、BB 为十六进制正整数，取值范围为 00 - FF。 9.19 小结9.19 小结本章通过一些代码示例介绍了CSS样式规则中的滤镜技术。需要特别注意的是，除了Opacity透明度属性之外，其他滤镜都只能在IE浏览器中使用。 滤镜有两类写法： 对于IE4.0至IE5版本就支持的滤镜，基本格式如下： Filter:滤镜名称(参数) 而对于IE5。5以及以上版本才支持的滤镜，编写方式如下： filter : progid:DXImageTransform.Microsoft.滤镜名称(参数)