基础教程：Hype 4元素面板 — 滤镜效果

本章节将深入探讨Hype 4 HTML5创作工具元素面板中的滤镜效果，这在Web页面设计中也算是比较新的内容。由于兼容性问题，当前很多Web网页使用得较少。此外，小编在讲解中对于滤镜名称都会用中英文表示，以利于小伙伴在网上搜索该滤镜在CSS3语言中的使用方法和作用。

在Hype 4交互动效制作软件中，滤镜效果（Filter Effects）包含两部分——前景（Foreground）和背景幕（Backdrop），每一部分又各自包含了六种滤镜——模糊度（blur）、棕褐色（sepia）、饱和度（saturate）、色调（hue-rotate）、亮度（brightness）和对比度（contrast）。

图1：滤镜效果设置界面

一、前景（filter）

一般而言，对图像的处理都使用图像处理软件。在Web页面设计中，CSS3语言提供了filter属性，可以对图像进行一些简单的处理。

blur（模糊度）：给图像设置高斯模糊，blur的值越大，图像越模糊。Blur的默认值为0，表示图像没有变化；最大值为20px，表示图像模糊度达到最大。

图2：对象的模糊效果

sepia（棕褐色）：将图像的颜色转换为棕褐色，sepia的值定义为转换的比例。0表示没有转换，100%表示图像颜色完全转换为棕褐色。

图3：对象的棕褐色转换效果

saturate（饱和度）：转换图像颜色饱和度，saturate的值定义转换的比例。值为0则完全不饱和，默认值为1.0表示图像无变化，最大值为11表示图像的饱和度最大。

图4：对象的饱和度变化效果

hue-rotate（色调）：给图像应用色相旋转。值为0deg时图像没有变化，默认值为0deg；最大值为360deg，图像颜色在0deg-360deg的色调轮间变化。

图5：对象的色调转换效果

brightness（亮度）：给图像应用一种线性乘法，使其看起来更亮或更暗。如果值是0，图像会全黑。默认值是100%，则图像无变化。最大值为400%，表示图像的亮度达到最亮。

图6：对象的亮度变化效果

contrast（对比度）：调整图像的对比度。值是0图像会全黑。默认值是1.0，图像不变。最大值是11，表示图像的对比度达到最大。

图7：对象的对比度变化效

二、小结

前景（filter）可以直接作用到对象上，效果直观明了，相对比较简单。要注意的是浏览器的兼容性问题。对于一些老版本的浏览器，可能会不支持filter滤镜，这样在浏览器上就无法看到滤镜的效果。