第21章滤镜特效的应用.ppt

《第21章滤镜特效的应用.ppt》由会员分享，可在线阅读，更多相关《第21章滤镜特效的应用.ppt（71页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 本书编委会 编著实例版实例版第第21章章 滤镜特效的应用滤镜特效的应用21.1 设置透明度设置透明度alpha21.2 添加模糊效果添加模糊效果blur21.3 设置水平设置水平/垂直翻转垂直翻转fliph/flipv21.4 设置灰度设置灰度21.5 设置反转设置反转21.6 设置设置X射线效果射线效果xray21.7 设置波浪效果wave21.8 设置阴影设置阴影dropshadow21.9 设置边缘光晕效果设置边缘光晕效果glow21.10 设置遮罩设置遮罩mask21.11 设置渐变阴影设置渐变阴影shadow21.12 设定颜色透明设定颜色透明chroma21.13 小实例小实例滤

2、镜的综合应用滤镜的综合应用HTML/CSS/JavaScript 标准教程实例版（第2版）HTML/CSS/JavaScript 标准教程实例版（第2版）第章21第第21章章 滤镜特效的应用滤镜特效的应用基本语法filter:滤镜属性（参数滤镜属性（参数1，参数，参数2，）HTML/CSS/JavaScript 标准教程实例版（第2版）第章21第第21章章 滤镜特效的应用滤镜特效的应用语法说明 filter是滤镜属性选择符。滤镜属性包含有好多种，本章主要介绍的如表21-1。参数值就是属性值，用来反映属性效果的，具体各个滤镜属性的参数值将在后面详细介绍。HTML/CSS/JavaScript 标

3、准教程实例版（第2版）第章2121.1 设置透明度设置透明度alpha基本语法filter:alpha(opacity=opacity，finishopacity=finishopacity，style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy)HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.1 设置透明度设置透明度alpha语法说明alpha属性包含的参数说明HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.1 设置透明度设置透明度alpha实例

4、代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.1 设置透明度设置透明度alpha接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.1 设置透明度设置透明度alpha接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.1 设置透明度设置透明度alpha网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.1 设置透明度设置透明度alpha提示在运行含有滤镜属性的代码时，浏览器会出现一个信息栏提示您Internet Explorer阻止了一些不安全的内容。这时您只要

5、单击信息栏的“确定”按钮，然后再右键单击靠近浏览器顶端的信息，从快捷菜单选择“允许阻止的内容”即可看到滤镜的效果。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.2 添加模糊效果添加模糊效果blur基本语法基本语法filter：blur（add=add，direction=direction，strength=strength）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.2 添加模糊效果添加模糊效果blur语法说明语法说明 blue属性包含的参数说明见表21-3。动态模糊的方向是以45为一个单位，所以如果设置的方向度数不是45的倍

6、数的话，浏览器就会以其最接近的45倍数来设置模糊度数。如，设置了direction=160，实际浏览器是以180来显示模糊方向的。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.2 添加模糊效果添加模糊效果blur实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.2 添加模糊效果添加模糊效果blur接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.2 添加模糊效果添加模糊效果blur网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.3 设

7、置水平设置水平/垂直翻转垂直翻转fliph/flipv基本语法基本语法filter：fliphfilter：flipvHTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.3 设置水平设置水平/垂直翻转垂直翻转fliph/flipv语法说明语法说明 fliph和flipv两个属性都没有参数，可以直接引用。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.3 设置水平设置水平/垂直翻转垂直翻转fliph/flipv实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.3 设置水平设置水平/垂直翻转垂直翻转

8、fliph/flipv接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.3 设置水平设置水平/垂直翻转垂直翻转fliph/flipv网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.3 设置水平设置水平/垂直翻转垂直翻转fliph/flipv提示提示在实际应用过程中，水平翻转和垂直翻转滤镜属性也可以同时使用。其语法为：filter：fliph flipv;两个属性中间用空格隔开，代表水平垂直翻转。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.4 设置灰度设置灰度基本语法基本语法f

9、ilter：grayHTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.4 设置灰度设置灰度实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.4 设置灰度设置灰度接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.4 设置灰度设置灰度网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.6 设置设置X射线效果射线效果xray基本语法基本语法filter：xrayHTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.6 设置设

10、置X射线效果射线效果xray实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.6 设置设置X射线效果射线效果xray接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.6 设置设置X射线效果射线效果xray网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.6 设置设置X射线效果射线效果xray实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.6 设置设置X射线效果射线效果xray接上页接上页HTML/CSS/JavaScrip

11、t 标准教程实例版（第2版）第章2121.6 设置设置X射线效果射线效果xray网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.7 设置波浪效果设置波浪效果wave基本语法基本语法filter：wave（add=true（false），），freq=频率，频率，lightstrength=光强，光强，phase=偏移量，偏移量，strength=强度）强度）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.7 设置波浪效果设置波浪效果wave语法说明语法说明 wave属性包含的参数说明HTML/CSS/JavaScrip

12、t 标准教程实例版（第2版）第章2121.7 设置波浪效果设置波浪效果wave实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.7 设置波浪效果设置波浪效果wave接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.7 设置波浪效果设置波浪效果wave网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.8 设置阴影设置阴影dropshadow基本语法基本语法filter：dropshadow（color=color，offx=offx，offy=offy，positive

13、=positive）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.8 设置阴影设置阴影dropshadow语法说明语法说明dropshadow属性包含的参数说明HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.8 设置阴影设置阴影dropshadow实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.8 设置阴影设置阴影dropshadow接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.8 设置阴影设置阴影dropshadow网页效果网页效果HTML/

14、CSS/JavaScript 标准教程实例版（第2版）第章2121.9 设置边缘光晕效果设置边缘光晕效果glow基本语法基本语法filter：glow（color=color，strength=strength）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.9 设置边缘光晕效果设置边缘光晕效果glow语法说明语法说明glow属性包含的参数说明HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.9 设置边缘光晕效果设置边缘光晕效果glow实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.9 设置

15、边缘光晕效果设置边缘光晕效果glow接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.9 设置边缘光晕效果设置边缘光晕效果glow网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.10 设置遮罩设置遮罩mask基本语法基本语法filter：mask（color=颜色值）颜色值）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.10 设置遮罩设置遮罩mask语法说明语法说明这里的颜色值可以使用颜色名称或RGB值，而且color参数值的颜色正是遮罩后所显示的颜色，很类似用印章印出的效果。

16、HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.10 设置遮罩设置遮罩mask实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.10 设置遮罩设置遮罩mask接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.10 设置遮罩设置遮罩mask网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.10 设置遮罩设置遮罩mask效果说明效果说明图21-12中上下两段文字应用了两个层，但只给第二个层内容应用了所定义的样式，而且在样式中定义了遮罩的颜色为

17、蓝色，所以图中第二段文字的颜色被蓝色覆盖，看到的是覆盖后的效果。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.11 设置渐变阴影设置渐变阴影shadow基本语法基本语法filter：shadow（color=color，direction=direction）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.11 设置渐变阴影设置渐变阴影shadow语法说明语法说明 color设置渐变阴影的颜色。direction设置渐变阴影的方向，从0开始，每45为一个单位，默认值是225。和滤镜属性blur模糊效果的direction参数值设置方

18、法一样。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.11 设置渐变阴影设置渐变阴影shadow实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.11 设置渐变阴影设置渐变阴影shadow接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.11 设置渐变阴影设置渐变阴影shadow网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.12 设定颜色透明设定颜色透明chroma基本语法基本语法filter：chroma（color=颜色值）颜色

19、值）HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.12 设定颜色透明设定颜色透明chroma语法说明语法说明参数color的颜色值可以使用颜色名称或RGB值，并且这个颜色就是要设置为透明的颜色。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.12 设定颜色透明设定颜色透明chroma实例代码实例代码HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.12 设定颜色透明设定颜色透明chroma接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.12 设定颜色透明设定颜色透

20、明chroma网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.12 设定颜色透明设定颜色透明chroma效果说明效果说明图21-15是没有设置颜色透明前的效果，图21-16是设置了红色为透明颜色的效果，看不到了文字“电子工业出版社”，因为该文字颜色是红色的，所以变为了透明色。虽然看不见透明颜色的效果，但它本身还是占用空间的，如图21-17是用鼠标选取后的效果。HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.13 小实例小实例滤镜的综合应用滤镜的综合应用实例代码HTML/CSS/JavaScript 标准教程实例版（第2

21、版）第章2121.13 小实例小实例滤镜的综合应用滤镜的综合应用接上页接上页HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.13 小实例小实例滤镜的综合应用滤镜的综合应用网页效果网页效果HTML/CSS/JavaScript 标准教程实例版（第2版）第章2121.13 小实例小实例滤镜的综合应用滤镜的综合应用效果说明效果说明图21-18中都是应用了两个滤镜属性后所看到的效果，但不是所有属性都可以一起用，如应用了透明属性后再应用模糊属性，效果就会不明显。而且有一些滤镜属性对图像的支持不是很好，多用于文字，如阴影、光晕、遮罩和颜色透明等。所以在调用多个滤镜属性时最好多次浏览效果图，看是否达到理想的效果。