基础教程：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属性，可以对图像进行一些简单的处理。

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

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

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

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

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

1. contrast（对比度）：调整图像的对比度。值是0图像会全黑。默认值是1.0，图像不变。最大值是11，表示图像的对比度达到最大。感兴趣的小伙伴可以点击Hype下载进行尝试操作。

1. 二、小结

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

作者：东佛