Hype元素介绍之CSS滤镜效果

Hype 4.0（Mac系统）的CSS滤镜效果拥有多种调整效果，让用户犹如使用图片编辑软件一样，可对图片进行模糊、饱和度、对比度、色相、亮度等效果处理，而且这些滤镜效果都可以通过时间线操作设置为动画效果。

本文将为大家介绍Hype 4滤镜的具体调整参数，同时也会通过两个例子来演示参数调整的效果。

图1：Hype 4界面

一、打开元素检查器

首先，Hype 4的CSS滤镜功能位于元素检查器中，用户可以通过单击“查看”菜单中的“元素检查器”，打开该操作面板。

图2：打开元素检查器

如图3所示，Hype 4的CSS滤镜效果位于元素检查器的底部，包含了应用模式、模糊度、棕褐色、饱和度、色调、亮度以及对比度这七个参数。其中应用模式中的前景效果支持Chrome 18 +，Safari 6+和iOS 6+；而背景效果仅支持iOS 9+和Safari 9+ 。

图3：元素检查器

二、调整滤镜的方法

调整Hype 4 CSS滤镜的方法很简单，只要选中图片元素，然后再依次调整滤镜中的参数，直至效果达到满意的程度即可。调整后，如果觉得效果不是很理想，也可以单击底部的“将滤镜还原为默认设置”，重新再进行参数调整。

接下来，小编将会给大家演示两个例子。

图4：滤镜调整参数

例子1：模糊滤镜

如图5所示，模糊滤镜的效果，主要应用的就是滤镜参数中的模糊度，提高模糊度可让照片呈现模糊的状态。模糊滤镜的效果适合用于背景滤镜，以模糊的背景突显前景的元素。

图5：模糊滤镜

例子2：增强颜色对比度

原照片中的颜色对比度较低，呈现了一种温柔的效果。如图6所示，小编提高照片对比度的参数，让照片中的主体形象更加鲜明，减少相似颜色带来的干扰。

图6：增强对比度

Hype 4 的CSS滤镜效果可以帮助用户更好地处理图片元素，减少来回切换图片编辑软件的繁琐。如果您还需要其他的功能介绍，或者希望学习其他使用技巧，请访问Hype教程页面。