第12章 CSS滤镜的应用.pptVIP

第12章 CSS滤镜的应用 CSS滤镜是微软公司开发的整合在IE浏览器中的功能。所谓滤镜就是对图片产生一定的图形变换效果。由于这套CSS滤镜是微软公司开发，版权属于微软公司，所以其他浏览器并不支持CSS滤镜。而IE浏览器广泛使用，因此许多网页设计师都经常使用CSS滤镜来为图片增效。本章主要介绍CSS滤镜的使用方法。本章内容包括： CSS滤镜的介绍和应用 12.1 滤镜概述 设置滤镜的CSS属性为filter。 12.2 透明层次滤镜（Alpha） 透明层次滤镜alpha用于设置透明度，alpha滤镜包含七个参数 1．使用参数opcity 2．使用参数style 12.3 颜色透明滤镜（chroma） 颜色透明滤镜用于设定一种颜色的透明度，而透明层次滤镜alpha用于设置整张图片的透明度。 12.4 模糊滤镜（Blur） 模糊滤镜能使图片变得朦胧，运用得当可得到诸如高速移动的动态效果。 12.5 固定阴影滤镜（dropshadow） 使用模糊滤镜产生的阴影效果时，文字的本体也会有些许模糊。可以使用固定阴影滤镜来为文字或者图片添加阴影。 12.6 移动阴影滤镜（shadow） 使用固定阴影滤镜产生的阴影是实边的，其实就是原来文字本体的一个复制阴影。要使产生的阴影具有渐进的效果，就要使用移动阴影滤镜shadow。使用该滤镜产生的阴影看起来更和谐。 12.7 光晕滤镜（glow） 使用光晕滤镜能让文字或者图片产生外发光的效果。 12.8 灰度滤镜（gray） 灰度滤镜Gray主要是用于把彩色图片变成黑白图片，gray滤镜没有参数。 12.9 反色滤镜（invert） 反色滤镜invert可以把对象的可视化属性全部翻转，包括色彩、饱和度、和亮度值等。当这个滤镜作用于彩色照片上，就会产生像照片负片一样的效果。invert滤镜没有参数。 12.10 镜像滤镜（flip） 镜像滤镜用于将图片或者文字翻转，翻转的方向可以是水平或垂直。 12.11 遮罩滤镜（mask） 遮罩滤镜mask滤镜将对文档中的元素添加一个矩形遮罩。mask滤镜使被遮罩透明元素成为实心的，实心元素成为透明的。 12.12 x射线滤镜（x-ray） x射线滤镜x-ray是让对象反映出它的轮廓并把这些轮廓加亮，就像照x光片一样。该滤镜没有参数。 12.13 波纹滤镜（wave） 波纹滤镜wave能让元素在垂直方向产生波纹状的变形 12.14 常见面试题 问题1：为什么在浏览器上不能显示滤镜的效果？ 问题2：为何对文字使用滤镜完全不生效？ 问题3：使用滤镜chroma时候能不能用颜色名称指定color参数值？ 12.15 小结 本章讲解了CSS滤镜的用法。CSS滤镜只有在IE浏览器上才能生效，大部分滤镜能应用到文字和图片中。本章的重点是在应用滤镜时要区分不同滤镜的效果。本章的难点是对滤镜的各个参数的理解和运用。下一章将总结编写CSS语句的规范。出自俊网天下: