网页设计与制作第14章.doc

第14章 CSS中的滤镜 ? 一、滤镜介绍 1、Alpha滤镜 Alpha(Opacity=?,FinishOpacity=?,style=?,StartX=?,StartY=?,FinishX=?,FinishY=?) Opacity为透明度级别，从0~100，0完全透明，100代表不透明； FinishOpacity设置渐变的透明效果时指定结束时的透明度，从0~100； style设置渐变的透明的样式，1代表线形、2代表放射状，3代表长方形； StartX和StartY代表渐变透明效果的开始X和Y坐标； FinishX和FinishY代表渐变透明效果的结束X和Y坐标。 2、Blur滤镜 Blur(add=?,Direction=?,Strength=?) add设置是否单方向模糊，非0为是，0为否； Direction设置模糊的方向，0代表垂直向上，然后每45度为一个单位； Strength代表模糊的像素值。 3、Chroma滤镜 Chroma(Color=?) 将指定的颜色设置为透明 4、DropShadow滤镜 DropShadow(color=?,OffX=?,OffY=?,Positive=?) color指定阴影的颜色 OffX指定阴影相对于元素在水平方向的偏移量，其值为整数； OffY指定阴影相对于元素在垂直方向的偏移量，其值为整数； Positive非0表示建立外阴影，0表示建立内阴影。 5、FlipH、FlipV滤镜 FlipH 水平翻转 FlipV 垂直翻转 6、Golw滤镜 Golw(Color=?,Strength=?) color指定发光的颜色； Strength指定发光的强度。 7、Gray、Invert、Xray滤镜 Gray 灰度 Invert 反转(色彩、饱和度、亮度全部翻转） Xray X光片（让对象反映出它的轮廓并把这些轮廓加亮） 8、Shdow滤镜 Shdow(Color=?,Direction=?) color指定阴影的颜色； Direction设置模糊的方向，0代表垂直向上。 9、Wave滤镜 Wave(Add=?,Freq=?,LightStrength=?,Phase=?Strength=?) Add非0表示要显示原对象，0表示不显示； Freq用来设置波动的个数； LightStrength设置波浪效果的光照强度，从0到100,0最弱，100最强； Phase设置波浪的起始相角；从0到100的百分数值，25相对于90度，而50相对于180度； Strength设置波浪摇摆的幅度。 ?二、滤镜的使用 原始图像“weixiaofiles/Sg1430.jpg”HTMLHEADTITLE使用Alpha滤镜/TITLESTYLE type=text/css.filter1 {FILTER: Alpha(Opacity=100, FinishOpacity=0, Style=3, StartX=0, StartY=0, FinishX=400, FinishY=500)}/STYLE/HEADBODY background=weixiao.files/5651.jpg bgColor=#ffffffbrbrbrdiv align=centerIMG class=filter1 height=600 src=weixiao.files/Sg1430.jpg width=400/div/BODY/HTML 例2：图片使用多种滤镜效果 lyq.htm htmlheadtitle图片效果/titlestyle type=text/css.xray {filter: Xray;}.invert {filter: Invert;}.gray {filter: Gray;}.fliph {filter: FlipH;}.flipv {filter: FlipV;}/style/headbody topmargin=0 leftmargin=0table width=720 height=270 border=1 cellpadding=0 cellspacing=0trtd align=centerimg src=weixiao.files/Sg1430.jpg width=180 class=fliph/td