第21章 滤镜特效的应用(HTML CSS JavaScript 标准教程实例版(第2版)).pptVIP

21.12 设定颜色透明——chroma 基本语法 filter：chroma（color=颜色值） 21.12 设定颜色透明——chroma 语法说明 参数color的颜色值可以使用颜色名称或RGB值，并且这个颜色就是要设置为透明的颜色。 21.12 设定颜色透明——chroma 实例代码 21.12 设定颜色透明——chroma 接上页 21.12 设定颜色透明——chroma 网页效果 21.12 设定颜色透明——chroma 效果说明 图21-15是没有设置颜色透明前的效果，图21-16是设置了红色为透明颜色的效果，看不到了文字“电子工业出版社”，因为该文字颜色是红色的，所以变为了透明色。虽然看不见透明颜色的效果，但它本身还是占用空间的，如图21-17是用鼠标选取后的效果。 21.13 小实例——滤镜的综合应用 实例代码 21.13 小实例——滤镜的综合应用 接上页 21.13 小实例——滤镜的综合应用 网页效果 21.13 小实例——滤镜的综合应用 效果说明 图21-18中都是应用了两个滤镜属性后所看到的效果，但不是所有属性都可以一起用，如应用了透明属性后再应用模糊属性，效果就会不明显。而且有一些滤镜属性对图像的支持不是很好，多用于文字，如阴影、光晕、遮罩和颜色透明等。所以在调用多个滤镜属性时最好多次浏览效果图，看是否达到理想的效果。 21.6 设置X射线效果——xray 实例代码 21.6 设置X射线效果——xray 接上页 21.6 设置X射线效果——xray 网页效果 21.6 设置X射线效果——xray 实例代码 21.6 设置X射线效果——xray 接上页 21.6 设置X射线效果——xray 网页效果 21.7 设置波浪效果——wave 基本语法 filter：wave（add=true（false），freq=频率，lightstrength=光强，phase=偏移量，strength=强度） 21.7 设置波浪效果——wave 语法说明—— wave属性包含的参数说明 21.7 设置波浪效果——wave 实例代码 21.7 设置波浪效果——wave 接上页 21.7 设置波浪效果——wave 网页效果 21.8 设置阴影——dropshadow 基本语法 filter：dropshadow（color=color，offx=offx，offy=offy，positive=positive） 21.8 设置阴影——dropshadow 语法说明——dropshadow属性包含的参数说明 21.8 设置阴影——dropshadow 实例代码 21.8 设置阴影——dropshadow 接上页 21.8 设置阴影——dropshadow 网页效果 21.9 设置边缘光晕效果——glow 基本语法 filter：glow（color=color，strength=strength） 21.9 设置边缘光晕效果——glow 语法说明——glow属性包含的参数说明 21.9 设置边缘光晕效果——glow 实例代码 21.9 设置边缘光晕效果——glow 接上页 21.9 设置边缘光晕效果——glow 网页效果 21.10 设置遮罩——mask 基本语法 filter：mask（color=颜色值） 21.10 设置遮罩——mask 语法说明 这里的颜色值可以使用颜色名称或RGB值，而且color参数值的颜色正是遮罩后所显示的颜色，很类似用印章印出的效果。 21.10 设置遮罩——mask 实例代码 21.10 设置遮罩——mask 接上页 21.10 设置遮罩——mask 网页效果 21.10 设置遮罩——mask 效果说明 图21-12中上下两段文字应用了两个层，但只给第二个层内容应用了所定义的样式，而且在样式中定义了遮罩的颜色为蓝色，所以图中第二段文字的颜色被蓝色覆盖，看到的是覆盖后的效果。 21.11 设置渐变阴影——shadow 基本语法 filter：shadow（color=color，direction=direction） 21.11 设置渐变阴影——shadow 语法说明 ? color设置渐变阴影的颜色。 ? direction设置渐变阴影的方向，从0°开始，每45°为一个单位，默认值是225°。和滤镜属性blur模糊效果的direction参数值设置方法一样。 21.11 设置渐变阴影——shadow 实例代码 21.11 设置渐变阴影——shadow 接上页 21.11 设置渐变阴影——shadow 网页效果 HTML/CSS/JavaScript 标准教程实例版（第2版） 第