《网页设计语言教程》第12章 CSS滤镜

第12章CSS滤镜 12.1滤镜简介 12.2 Alpha滤镜 12.3Blur滤镜 12.4 Dropshadow滤镜 12.5Glow滤镜

第12章 CSS滤镜 12.1 滤镜简介 12.2 Alpha滤镜 12.3 Blur 滤镜 12.4 Dropshadow滤镜 12.5 Glow滤镜

12.6Gray、 Invert和Xray滤镜 12.7FipH, Flipv滤镜 12.8Wave滤镜 12.9 Shadow滤镜 12.10Mask滤镜 12.11 Chroma滤镜 12.12转换滤镜

12.6 Gray、Invert和Xray滤镜 12.7 FlipH，FlipV滤镜 12.8 Wave滤镜 12.9 Shadow滤镜 12.10 Mask滤镜 12.11 Chroma滤镜 12.12 转换滤镜

12.1滤镜简介 ◇滤镜( Filter)可以用来改变图形的外观,以增加图形的 视觉效果。 滤镜分为视觉滤镜( Visual filters)和转换滤镜 ( Transition filters)两大类 令视觉滤镜只可以达到静态的特效效果。 令转换滤镜是用于两画面进行转换时所使用的特效,将产生 动态效果,除了在网页中利用0ss的定义语法外,还必须配 合 Script语言(如: VBScr ipt、 JavaScript)以及事件的 概念,才能自如地使用转换滤镜,产生炫丽的效果。 ◇由于滤镜功能是在lE4.0版才开始提供的功能,所以只能 在|E4.0以上的浏览器中使用,才能实现滤镜的效果

12.1 滤镜简介 ❖滤镜（Filter）可以用来改变图形的外观，以增加图形的 视觉效果。 ❖滤镜分为视觉滤镜（Visual Filters）和转换滤镜 （Transition Filters）两大类。 ❖视觉滤镜只可以达到静态的特效效果。 ❖转换滤镜是用于两画面进行转换时所使用的特效，将产生 动态效果，除了在网页中利用CSS的定义语法外，还必须配 合Script语言（如：VBScript、JavaScript）以及事件的 概念，才能自如地使用转换滤镜，产生炫丽的效果。 ❖由于滤镜功能是在IE4.0版才开始提供的功能，所以只能 在IE4.0以上的浏览器中使用，才能实现滤镜的效果

☆cSS的滤镜属性的标识符是 filter 今书写格式: filter: filtername (parameters) > Filter是滤镜属性选择符。 > filtername是滤镜属性名,包括 al pha b|ur、 chroma等 > par ameters是表示各个滤镜属性的参数, 也正是这些参数决定了滤镜将以怎样的效果 显示

❖CSS的滤镜属性的标识符是filter。 ❖书写格式： filter：filtername（parameters） ➢Filter是滤镜属性选择符。 ➢filtername是滤镜属性名，包括alpha、 blur、chroma等 ➢parameters是表示各个滤镜属性的参数， 也正是这些参数决定了滤镜将以怎样的效果 显示

2.2Apha滤镜 alpha滤镜可以产生颜色透明及渐变的效果。 alpha滤镜的基本语法如下: style="filter: al pha (opacity=opc ity finishopacity=finishopacity, sty le=style startxestartx startY=starty finishXefinishX finish= finish)” Alpha滤镜的参数说明如下

12.2 Alpha滤镜 Alpha滤镜可以产生颜色透明及渐变的效果。 Alpha滤镜的基本语法如下： style=“filter：alpha（opacity=opcity， finishopacity=finishopacity，style=style， startX=startX，startY=startY，finishX=finishX， finishY=finishY）” Alpha滤镜的参数说明如下

参数名称 说明 opacity 开始时的透明度。设置0(完全透明)~100(完全不透明), 值越大透明度越低。 finishOpacity 结束时的透明度。设置0(完全透明)~100(完全不透明), 值越大透明度越低。 style 渐变的形状。0:均匀;1:直线;2:圆形;3:矩形 startX 渐变开始时的X坐标,度量单位为图片宽度的百分比。 startY 渐变开始时的Y坐标,度量单位为图片高度的百分比。 finish 渐变结束时的X坐标,度量单位为图片宽度的百分比。 finish 渐变结束时的Y坐标,度量单位为图片高度的百分比

参数名称 说明 opacity 开始时的透明度。设置0(完全透明)～100(完全不透明)， 值越大透明度越低。 finishOpacity 结束时的透明度。设置0(完全透明)～100(完全不透明)， 值越大透明度越低。 style 渐变的形状。0:均匀；1:直线；2:圆形；3:矩形 startX 渐变开始时的X坐标，度量单位为图片宽度的百分比。 startY 渐变开始时的Y坐标，度量单位为图片高度的百分比。 finishX 渐变结束时的X坐标，度量单位为图片宽度的百分比。 finishY 渐变结束时的Y坐标，度量单位为图片高度的百分比

12.3B|ur滤镜 B|ur滤镜可以产生快速移动的动态模糊效果。 B|ur滤镜的基本语法如下 style="filter: Blur(add=value, direction=value , strength=va|ue)” B|ur滤镜的参数说明如下

12.3 Blur 滤镜 Blur滤镜可以产生快速移动的动态模糊效果。 Blur滤镜的基本语法如下： style=“filter:Blur(add=value,direction=value ,strength=value)” Blur滤镜的参数说明如下

参数名称 说明 参数值 add 是否要显示原来的对象0(不显示)、1(显示)。默认 值为1,即显示原来的对象。 总单位为360°,0代表垂直 direction动态模糊效果的方向向上,并以每45°为一个单 位,默认值为270° 动态模糊效果的大小, strength表示有多少像素的大小以整数来设置,默认值为 会被影响。 5pxo

参数名称 说明 参数值 add 是否要显示原来的对象 0(不显示)、1(显示)。默认 值为1，即显示原来的对象。 direction 动态模糊效果的方向 总单位为360° ，0代表垂直 向上，并以每45°为一个单 位，默认值为270° 。 strength 动态模糊效果的大小， 表示有多少像素的大小 会被影响。 以整数来设置，默认值为 5px

其中:参数 direction用于设定动态模糊效 果的方向,总单位为360°,0代表垂直向上, 并以每45°为一个单位,而度数以方向定位时 将如下图所示。 角度方向 Top(垂直向上) 45 Top right(垂直向右) 90 Right(向右) 135 Bottom right(向下偏右)270 180 Bottom(垂直向下) 225 Bottom left(向下偏左) 270Left(向左) 135 315 Top left(向上偏左) 180

其中：参数direction用于设定动态模糊效 果的方向，总单位为360° ，0代表垂直向上， 并以每45°为一个单位，而度数以方向定位时， 将如下图所示

2.4 Dropshadow滤镜 Dropshadow滤镜用于设置对象产生阴影效果。 Dropshadow滤镜的基本语法如下: style=filter: Dropshadow(color=#value offx=value, offy=value, pos itive=value) Dropshadow滤镜的参数说明如下

Dropshadow滤镜用于设置对象产生阴影效果。 Dropshadow滤镜的基本语法如下： style=“filter:Dropshadow(color=#value, offx=value,offy=value,positive=value)” Dropshadow滤镜的参数说明如下 12.4 Dropshadow滤镜