css滤镜中文手册.doc

1、css 滤镜中文手册Introduction To This Book 关于此手册手册说明：本手册是 Rainers DHTML Library 产品的一部分。本手册针对的是已有一定网页设计制作经验的读者。其目的是提供完整清晰的样式滤镜的快速索引及进阶帮助。所以对于网页制作和样式表的基础知识，仅简单介绍，恕不赘述。 本手册以浏览器的事实标准 Internet Explorer 为主。手册中为所有的滤镜，除了基本的语法示范外，都度身制作了可以对照源代码即时察看运行演示的实例。本手册的升级信息与版权声明请参阅关于本书页面。 本书中涉及到的所有 HTML 对象(Object，Element)，HTM

2、L 属性(Attributes)和特性(Properties)请参阅我的相关著作。 End User License Agreement 最终用户许可协议重要须知：本最终用户许可协议 （以下称协议 ）是您（个人或单一实体）与苏昱之间有关苏昱之作品的法律协议。本作品包括计算机软件，并可能包括相关媒体、印刷材料，电子文档，图片。还包括对苏昱提供给您的原作品的任何更新和补充资料。您一旦安装、复制、下载、访问或以其它方式使用本作品，即表示您同意接受本协议各项条款的约束。如您不同意本协议中的条款，请不要安装或使用本作品。 协议条款：本作品受著作权法及国际著作权条约和其它知识产权法和条约的保护。本作品（包

3、括但不限于本作品中所含的任何图象、照片、动画、录像、录音、音乐、文字和附加程序） 、随附的印刷材料、及本作品的任何副本的产权和著作权，均由苏昱或相关作者拥有。本协议授予您下列权利：您可以安装、使用、访问、显示、运行本作品。您可以保留多份副本，可以自由传播本作品。上述权利不适用于您的任何商业行为或商业用途。否则您务必与苏昱联系。苏昱不为本“软件产品“ 做任何担保。本 “软件产品“及任何相关文档以 “即此“形式提供，无任何明示的或暗示的担保，包括（但不限于）对可销售性、适用性、或无侵权的暗示担保。使用本“软件产品 “所引起的全部风险由您自己承担。本协议未明示授予的一切其它权利均为苏昱或相关作者所有

4、。对于此处所指的其他权利，如篡改、反编译、改编、引用、拆解（破坏本作品原始完整性）等，同样请您务必与苏昱先行联系。如您未遵守本协议的各项条款和条件，在不损害其它权利的情况下，苏昱可终止本协议 。如此类情况发生，您必须销毁本作品的所有副本及其所有组成部分。苏昱保留对本产品及本协议的最终修改权。filters 版本： DHTML Object Model 数组集合语法：Scripting oColl = object.filters Scripting oObject = object.filters ( vIndex , iSubIndex ) 取值：vIndex : 必选项。整数值(Integ

5、er) | 字符串(String)如果此参数使用的是整数值，则返回数组中的整数序号等于此参数值的要素。如此参数值等于 0 则返回数组中的第一个要素。如果此参数值使用的是字符串值，则返回数组中所有 name 或 id 属性等于此参数值的要素。假如符合条件的要素数目多于一个，则返回的将是一个数组。iSubIndex : 可选项。整数值(Integer) 。当 vIndex 参数值为 字符串时，数组中所有 name 或 id 属性等于 vIndex 的要素将被作为一个数组获取，而 此参数值便用于指定返回此数组中的整数序号等于此参数值的要素。返回值：oColl : 数组(Array) 。返回作用于 o

6、bject 的滤镜集合。oObject : 对象(Object)。返回对被 object 包含的要素数组中的一个项目的引用。说明：获取作用于 object 的滤镜集合。 AlphaImageLoader 兼容性：IE5.5+语法：CSS filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.A

7、lphaImageLoader ( sProperties ) “ 说明：在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是 PNG(Portable Network Graphics)格式，则 0%-100%的透明度也被提供。PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在 PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。示例：#idDivposition:absolute; left:140px; height:400

8、; width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=rain1977.gif,sizingMethod=scale);.dreamfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/earglobe.gif);Gradient 兼容性：IE5.5+语法：CSS filter : progid:DXImageTransform.Microsoft.Gradient ( enabled=bEnabled , start

9、ColorStr=iWidth , endColorStr=iWidth ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Gradient ( sProperties ) “ 说明：在对象的背景和内容之间显示定制的色彩层。当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。 示例：#idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageT

10、ransform.Microsoft.gradient(enabled=false,startColorstr=#550000FF, endColorstr=#55FFFF00) ;#idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.gradient() ;Alpha 兼容性：IE4.0+语法：CSS filter : progid:DXImageTransform.Microsoft.Alpha ( enabled=bEnabled , styl

11、e=iStyle , opacity=iOpacity , finishOpacity=iFinishOpacity , startX=iPercent , startY=iPercent , finishX=iPercent , finishY=iPercent ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Alpha ( sProperties ) “ 说明：调整对象内容的透明度。你可以设置整体透明度，或线性渐变和放射渐变的透明度。 示例：#idDivposition:absolute; left:

12、140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);#idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=10,finishOpacity=100,style=2);BasicImage 兼容性：IE5.5+语法：CSS filter : progid:DXImageTransform.Microso

13、ft.BasicImage ( enabled=bEnabled , grayScale=bGray , mirror=bMirror , opacity=fOpacity , XRay=bXRay ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.BasicImage ( sProperties ) “ 说明：用于色彩处理，图像旋转，或对象内容的透明度。当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。 示例：#idDivposition

14、:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=.2); #idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.BasicImage(invert=1); #idDivposition:absolute; left:140px; height:400; width:400;filter:pr

15、ogid:DXImageTransform.Microsoft.BasicImage(invert=1,GrayScale=1); Blur 兼容性：IE5.5+语法：CSS filter : progid:DXImageTransform.Microsoft.Blur ( enabled=bEnabled , makeShadow=bShadow , pixelRadius=flRadius , shadowOpacity=fOpacity ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Blur (

16、sProperties ) “ 说明：制作对象内容的模糊效果。示例：#idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.blur() ; #idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3.0, makeshadow=true, ShadowOpacity=1.0)

17、; #idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled=false) ; Chroma 兼容性：IE4.0+语法：CSS filter : progid:DXImageTransform.Microsoft.Chroma ( enabled=bEnabled , color=sColor ) Scripting object.style.filter = “progid:DXImageTran

18、sform.Microsoft.Chroma ( sProperties ) “ 说明：将对象中指定的颜色显示为透明。不建议在 8 位到 24 位抖动的图片文件上使用此滤镜。例如保存时会抖动和压缩的 JPEG 格式图片文件，应用此滤镜，其结果会很难看。此效果在羽化(柔化色彩以同周围相邻的颜色平和的过渡 )的线条等处也不会很好的作用。确定的 color 参数值可能会导致图片自身的透明颜色变为不透明。 示例：#idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Micros

19、oft.Chroma(color=yellow), progid:DXImageTransform.Microsoft.Chroma(color=red) ; #idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Chroma(color=yellow) ; Compositor 兼容性：IE5.5+语法：CSS filter : progid:DXImageTransform.Microsoft.Compositor ( function=sFun

20、ction ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Compositor ( sProperties ) “ 说明：依据初始对象和新对象色彩的特定混合方式显示新的对象内容。这个滤镜提供了丰富的将输入对象的色彩和透明度相互作用的图像合成的功能设置。要建立转换滤镜，遵循下列步骤：1. 选择一个功能( function )。 2. 设置对象的合成滤镜( filter )的属性声明。 3. 确定滤镜对象初始显示的内容。合成功能将此作为输入 A 。 4. 使用合成滤镜的 apply 方法。捕获对象内容的初始

21、显示，为转换做必要的准备。 5. 改变对象的属性，如 visibility ， innerText ， background-color ， border ，或者其子对象的属性。合成功能将此作为输入 B 。 6. 使用合成滤镜的 play 方法。这会将合成功能输出的图像变化显示出来。 示例：#idDiv filter:progid:DXImageTransform.Microsoft.Compositor(function=20, duration=7);DropShadow 兼容性：IE4.0+语法：CSS filter : progid:DXImageTransform.Microsoft

22、.DropShadow ( enabled=bEnabled , color=sColor , offX=iOffsetX , offY=iOffsetY , positive=bPositive ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.DropShadow ( sProperties ) “ 说明：制作对象的阴影效果。示例：#idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransfo

23、rm.Microsoft.dropshadow(OffX=5, OffY=5, Color=gray, Positive=true); #idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.dropshadow(Positive=true) ; Emboss 兼容性：IE5.5+语法：CSS filter : progid:DXImageTransform.Microsoft.Emboss ( enabled=bEnabled , Bias=fBia

24、s ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Emboss ( sProperties ) “ 说明：用灰度值为对象内容制作浮雕纹理效果。示例：#idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.emboss(enabled=false) ; Engrave 兼容性：IE5.5+语法：CSS filter : progid:DXImageTransfor

25、m.Microsoft.Engrave ( enabled=bEnabled , Bias=fBias ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Engrave ( sProperties ) “ 说明：用灰度值为对象内容制作浮雕纹理效果。示例：#idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.emboss(enabled=false) ; Glow

26、兼容性：IE4.0+语法：CSS filter : progid:DXImageTransform.Microsoft.Glow ( enabled=bEnabled , color=sColor , strength=iDistance ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Glow ( sProperties ) “ 说明：环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外。_ 假如对象内有文本而无背景( background ) 和图片，则每个文本字符将会被辉

27、光环绕。 _ 假如对象内有背景( background ) 或图片，则整个对象容器会被辉光环绕。 _ 假如对象的子对象定位超出了对象边界，则仅仅在对象容器内的内容会被辉光环绕。 示例：#idDivposition:absolute; left:140px; height:400; width:400;filter: glow(Color=blue,Strength=5) ; #idDivposition:absolute; left:140px; height:400; width:400;filter: glow(color=#000000) ; Light 兼容性：IE4.0+语法：CSS

28、 filter : progid:DXImageTransform.Microsoft.Light ( enabled=bEnabled ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Light ( sProperties ) “ 说明：为对象的内容建立光照效果。你可以控制光源的虚拟位置，还可以控制光焦点的横纵坐标值。以及光的类型和强度。每个滤镜最多可以添加 10 束光。要想在页面上添加更多的光，你必须使用多个滤镜。当每束光被建立后，都有默认的环境光与之关联。你添加到对象的第一束光会替换掉它的默认的环境

29、光。 示例：.aFilter background-color: #FFFFFF; filter:light();color: cyan;width: 150; MaskFilter 兼容性：IE4.0+语法：CSS filter : progid:DXImageTransform.Microsoft.MaskFilter ( enabled=bEnabled , color=sColor ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.MaskFilter ( sProperties ) “ 说明：将对

30、象内容的透明像素用 color 参数指定的颜色显示作为一个遮罩，而非透明像素则转为透明。使用 BasicImage 滤镜能够更有效率的实现这一效果。 示例：DIV.aFilter filter:mask(color=#008800); width: 100;Matrix 兼容性：IE5.5+语法：CSS filter : progid:DXImageTransform.Microsoft.Matrix ( enabled=bEnabled , SizingMethod=sMethod , FilterType=sType , Dx=fDx , Dy=fDy , M11=fM11 , M12=f

31、M12 , M21=fM21 , M22=fM22 ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Matrix ( sProperties ) “ 说明：使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。使用此滤镜可以建立下列效果：7. 左右反转。将 M11 和 M12 的值取负。 8. 上下反转。将 M21 和 M22 的值取负。 9. 改变尺寸。将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。 使用 padding 属性能够使最终图像边角被

32、剪切的机会降到最小。 示例：#idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(enabled=false) ; #idDivposition:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.Matrix(M11=1.0, sizingmethod=“auto expand“); MotionBlur 兼容性：IE

33、4.0+语法：CSS filter : progid:DXImageTransform.Microsoft.MotionBlur ( enabled=bEnabled , add=bAddImage , direction=iOffset , strength=iDistance ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.MotionBlur ( sProperties ) “ 说明：为对象内容制作运动模糊效果。示例：DIV.aFilter filter:progid:DXImageTransfor

34、m.Microsoft.MotionBlur(Strength=5,Direction=90);#oDIV filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=10, Direction=45, Add=true); Shadow 兼容性：IE4.0+语法：CSS filter : progid:DXImageTransform.Microsoft.Shadow ( enabled=bEnabled , color=sColor , direction=iOffset , strength=iDistance ) Scrip

35、ting object.style.filter = “progid:DXImageTransform.Microsoft.Shadow ( sProperties ) “ 说明：为对象内容建立阴影效果。示例：DIV.aFilter filter:progid:DXImageTransform.Microsoft.Shadow(Strength=5,Direction=90);#oDIV filter:progid:DXImageTransform.Microsoft.Shadow(Strength=10, Direction=45, color=blue); Wave 兼容性：IE4.0+语

36、法：CSS filter : progid:DXImageTransform.Microsoft.Wave ( enabled=bEnabled , add=bAddImage , freq=iWaveCount , lightStrength=iPercentage , phase=iPercentage , strength=iDistance ) Scripting object.style.filter = “progid:DXImageTransform.Microsoft.Wave ( sProperties ) “ 说明：为对象内容建立波纹扭曲效果。示例：DIV.aFilter

37、filter:progid:DXImageTransform.Microsoft.Wave(Strength=5);#oDIV filter:progid:DXImageTransform.Microsoft.Wave(Strength=10, Add=true); ICMFilter 兼容性：IE5.5+语法：CSS filter : progid:DXImageTransform.Microsoft.ICMFilter ( colorSpace=sPathFilename , intent =sIntent ) Scripting object.style.filter = “progid

38、:DXImageTransform.Microsoft.ICMFilter ( sProperties ) “ 说明：根据颜色配置文件(.icm)转换对象的色彩内容。这样能激活对某些细节内容的显示改良，或对硬件设备输出的模拟显示。像打印机或显示器。通过根据要显示内容的类型匹配恰当的 Intent 特性值可以改善内容显示或打印的质量。例如，当你打印时，可以设置 Intent 特性值为 Graphic 从而确保颜色对比度的恰当。较高的对比度能够使打印出的内容清晰易读。要模拟硬件设备的色彩输出，你必须定位硬件设备的颜色配置文件(.icm)，假如制造商提供了这个文件。将这个颜色配置文件(.icm)的路

39、径和名称指给 ColorSpace 特性，并且对硬件装置要使用的内容应用此滤镜。颜色配置文件(.icm)为你的显示器定义了内容的颜色与显示器标准颜色的偏差。这样滤镜显示就可以模拟 其他硬件设备的输出。 示例：#idDiv filter:progid:DXImageTransform.Microsoft.ICMFilter(colorSpace=sRGB, intent=Picture);Gray 兼容性：IE4.0+语法：CSS filter : Gray ( enabled=bEnabled ) Scripting object.style.filter = “Gray ( sPropert

40、ies ) “ 说明：灰度显示对象内容。使用 BasicImage 滤镜可以更有效率的建立效果。 示例：#idDiv height:250px; width:250px; filter:Gray(); Invert 兼容性：IE4.0+语法：CSS filter : Invert ( enabled=bEnabled ) Scripting object.style.filter = “Invert ( sProperties ) “ 说明：反相显示对象内容。使用 BasicImage 滤镜可以更有效率的建立效果。 示例：#idDiv height:250px; width:250px; filter:Invert(); Xray 兼容性：IE4.0+语法：CSS filter : Xray ( enabled=bEnabled ) Scripting object.style.filter = “Xray ( sProperties ) “ 说明：以 X 光效果显示对象内容。使用 BasicImage 滤镜可以更有效率的建立效果。 示例：#idDiv height:250px; width:250px; filter:Xray();