DIVCSSCSS滤镜的应用学习教案

1、会计学1DIVCSSCSS滤镜的应用滤镜的应用(yngyng)第一页，共18页。8.8 灰度(Gray) 8.9 反色(Invert)8.10 遮罩(Mask)8.11 阴影(Shadow)8.12 X射线(X-ray) 8.13 浮雕(fdio)纹理(Emboss和Engrave)8.14 波浪(Wave)第八(d b)讲 CSS滤镜 第1页/共18页第二页，共18页。8.1 滤镜简介(jin ji) Css滤镜的标识符式“filter”，总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。 可以直接作用于对象(duxing)上，并且立即生效的滤镜称为基本滤镜。而要配

2、合JavaScript等脚本语言，能产生更多变幻效果的则称为高级滤镜。 CSS滤镜的标识符是：滤镜的标识符是：filter语法：语法： filter：filtername（parameters） 进行滤镜之前必须定义进行滤镜之前必须定义(dngy)filter filtername是滤镜名，是滤镜名，parameters是滤镜参数是滤镜参数在在CSS样式中，提供了样式中，提供了filter（滤镜效果），它可以对文字、图片、表格等确定范围的（滤镜效果），它可以对文字、图片、表格等确定范围的HTML标记设置滤镜效果标记设置滤镜效果 第2页/共18页第三页，共18页。8.2 Alpha8.2 Alp

3、ha滤镜滤镜通道通道(tngdo)（alpha）Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)参数参数说说 明明Opacity代表透明度等级，可选值代表透明度等级，可选值0-100，0代表完全透明，代表完全透明，100代表完全不透明代表完全不透明FinishOpacity可选项，设置结束时的透明度，制作渐变效果，可选值可选项，设置结束时的透明度，制作渐变效果，可选值0-100Style指明区域的形状特征，指明区域的形状特征，0代表统一形状，代表统一形状，1代表线性，代表线性

4、，2代表圆形放射渐变，代表圆形放射渐变，3代表矩形反射渐变，当代表矩形反射渐变，当style为为2或或3时，时，StartX，StartY就无意义就无意义StartX，StartY代表透明效果的开始坐标，坐标值是百分比，取值范围代表透明效果的开始坐标，坐标值是百分比，取值范围0-100FinishX,FinishY代表透明效果的结束坐标，坐标值是百分比，取值范围代表透明效果的结束坐标，坐标值是百分比，取值范围0-100第3页/共18页第四页，共18页。8.3 Blur滤镜参数说 明makeshadowmakeshadow有有truetrue和和falsefalse两个值，用来指定是否有阴影效果

5、两个值，用来指定是否有阴影效果pixelradiuspixelradius表示模糊作用深度表示模糊作用深度shadowpacityshadowpacity表示阴影透明度表示阴影透明度模糊模糊(m hu)（blur）Blur(makeshadow=？, pixelradius=？, shadowpacity=？);第4页/共18页第五页，共18页。8.4 运动(yndng)模糊(MotionBlur)参数说 明Add有有true和和false两个值，用来指定是否叠加原图片两个值，用来指定是否叠加原图片Direction设置模糊的方向，模糊效果按顺时针方向进行。设置模糊的方向，模糊效果按顺时针方向

6、进行。0度代表度代表垂直向上，默认值垂直向上，默认值270度度Strength使用整数指定，代表有多少像素的宽度受到模糊影响，默使用整数指定，代表有多少像素的宽度受到模糊影响，默认值认值5pxl运动运动(yndng)模糊模糊(MotionBlur) lBlur(Add=？, Direction=？, Strength=？);第5页/共18页第六页，共18页。 其中：参数direction用于设定动态模糊效果的方向，总单位为360，0代表垂直向上，并以每45为一个单位，而度数以方向定位(dngwi)时，将如下图所示。第6页/共18页第七页，共18页。8.5 8.5 透明透明(tumng)(tum

7、ng)色色(Chroma)(Chroma)透明透明(tumng)色（色（Chroma）Chroma(enablrd=? ,Color=?)参数说 明enabled有有true和和false两个值，用来指定是否应用滤镜两个值，用来指定是否应用滤镜Color使某一个特定的颜色透明，此参数就代表它的颜色值使某一个特定的颜色透明，此参数就代表它的颜色值第7页/共18页第八页，共18页。8.6 8.6 反转反转(fn zhun)(fn zhun)变换变换(Flip)(Flip)FlipHFlipH滤镜是设置对象产生水平翻转滤镜是设置对象产生水平翻转180180，即左右相反的效，即左右相反的效果；而果；而

8、FlipVFlipV滤镜是设置对象产生垂直翻转滤镜是设置对象产生垂直翻转180180，即上下颠，即上下颠倒的效果。倒的效果。 这两个滤镜的基本这两个滤镜的基本(jbn)(jbn)语法如下：语法如下：filter:FlipHfilter:FlipHfilter:FlipVfilter:FlipV 这两个滤镜没有参数。这两个滤镜没有参数。第8页/共18页第九页，共18页。8.7 8.7 光晕光晕(un yn)(Glow)(un yn)(Glow)参数说 明Color指定发光的颜色指定发光的颜色Strength指定发光的强度，参数值从指定发光的强度，参数值从1-255光晕光晕(un yn)（Glow

9、）Glow(Color=?, Strength=?)第9页/共18页第十页，共18页。8.8 8.8 灰度灰度(Gray)(Gray)灰度（灰度（Gray）filter:Gray;第10页/共18页第十一页，共18页。8.9 8.9 反色反色(Invert)(Invert)反色（反色（invert）filter:invert;第11页/共18页第十二页，共18页。8.10 8.10 遮罩遮罩(Mast)(Mast)参数说 明ColorColor用来指定使用什么颜色作为掩膜，建议用用来指定使用什么颜色作为掩膜，建议用gifgif图片图片遮罩（遮罩（mask）mask(Color=?)第12页/共

10、18页第十三页，共18页。8.11 8.11 阴影阴影(ynyng)(Shadow)(ynyng)(Shadow)参数说 明ColorColor设置阴影的颜色设置阴影的颜色offxoffx用来设置阴影在横坐标轴上以对象为基准的偏移用来设置阴影在横坐标轴上以对象为基准的偏移量。其值为整数型，正右，负左，默认为量。其值为整数型，正右，负左，默认为5 5offyoffy用来设置阴影在纵坐标轴上以对象为基准的偏移用来设置阴影在纵坐标轴上以对象为基准的偏移量。其值为整数型，正下，负上，默认为量。其值为整数型，正下，负上，默认为5 5positivepositiveTrueTrue为任何非透明像素建立可见

11、投影，为任何非透明像素建立可见投影，falsefalse为为任何透明像素建立可见投影任何透明像素建立可见投影阴影阴影(ynyng)（shadow）Shadow(enabled=?,Color=?, offX=?,offY=?,positive=?)第13页/共18页第十四页，共18页。9.12 X-9.12 X-射线射线(shxin)(shxin)X X射线（射线（xrayxray）filter:xray;filter:xray;第14页/共18页第十五页，共18页。9.13 9.13 浮雕浮雕(fdio)(fdio)纹理纹理 浮雕浮雕(fdio)纹理纹理(Emboss和和Engrave)fi

12、lter:progid:DXImageTransform.Microsoft.emboss(ennabled=ennabled,bias=？)filter:progid:DXImageTransform.Microsoft.engrave(ennabled=ennabled,bias=?)参数说 明enabledenabled设置阴影的颜色设置阴影的颜色embossemboss产生凹陷的浮雕效果产生凹陷的浮雕效果engraveengrave产生突出的浮雕效果产生突出的浮雕效果biasbias浮雕深度浮雕深度第15页/共18页第十六页，共18页。参数说 明Add1表示显示原对象，表示显示原对象，0表示不显示原对象表示不显示原对象 Freq指生成波纹的频率，即在对象上共需要产生多少指生成波纹的频率，即在对象上共需要产生多少个完整的波纹个完整的波纹LightStrength使生成的波纹增强光的效果，参数值使生成的波纹增强光的效果，参数值0