日期:2014-05-17  浏览次数:20557 次

【学习笔记】CSS动态滤镜

W3C公布了样式单(CSS)的标准以来,HTML的每一部分开始以元素的形式出现,并且事件开始真正被引入页面,动态HTML成为了人们讨论的热点。实际上,W3C采用的标准即为微软的DOM,也就是说IE4.0可以更好的支持CSS,并且微软对CSS还进行了许多十分有益地探索,Filter就是一个很好的例子。

? 众所周知,JavascriptVbscript作为脚本语言,其功能是不完善的,有许多高级语言的功能无法实现,如图象的处理功能。Filter是微软对CSS的扩展,与PhotoShop中的滤镜概念相似,它可以用很简单的方法对页面中的文字特效作出特效处理,静态如阴影、模糊的效果,动态如各种淡入淡出效果。

? 如果你使用过图形软件的话,视觉滤镜这个概念你一定不会感到陌生。你可以选择一个图形,让计算机对其进行模糊过滤,或者将有些文字或图象反转处理。要想实现这些技巧,你得将需要变化的内容以位图形式输入你的图象处理软件,应用相应的过滤器,然后及其以GIFJPEG格式发布。

? 但是生成文字的图象格式会破坏原有文字的存储格式并且会延长下载的时间。生命的一分一秒被消耗在下载的漫长等待之中实在是一种残忍的折磨和享受。但是你需要为你的标题添加一点漂亮的蓝色下落阴影,并且在其四周环绕以红色的光晕。好吧,我们就给它加上一个漂亮的修饰。

? 有时候当图象下载到客户端时你需要对图象做一些变化,比如加一个移动模糊让其“神经质”地滑过屏幕。不要怕,CSS图象过滤器将帮助你实现你的愿望(但是现在只能在微软IE 4.0上实现这些功能)。

?

? 1CSS静态滤镜样式 filter)(只有IE4.0以上支持)

?

? CSS静态滤镜样式的使用方法:{ filter : filtername( parameters1, parameters2, ...) }

?

Filter样式 简要说明 支持参数

alpha 设置图片或文字的不透明度 opacityfinishOpacitystylestartXstartYfinishXfinishYadddirectionstrength

blur 在指定的方向和位置上产生动感模糊效果 adddirectionstrength

chroma 对所选择的颜色进行透明处理 color

dropShadow 在指定的方向和位置上产生阴影 coloroffXoffYpositive

flipH 沿水平方向翻转对象??

flipV 沿垂直方向翻转对象??