CSS混合模式为各种设计元素提供了很好的节奏变化。虽然我们可能会将它们与图像紧密关联，但上面的示例也显示了其他一些有效用途。文本甚至导航等项目都可以从中受益。

使用CSS混合模式添加炫酷效果

近年来，网页设计，特别是CSS，已经呈现出可预测的模式。首先，我们创建特殊效果，大量使用图像，外部库或两者。然后CSS出现并添加了这些功能 - 大大减少了对外部资源的需求。这意味着我们需要的大部分幕后功能都只是内置在浏览器中。

CSS混合模式就是这样一个启示。它允许元素显示前景层和背景层的颜色。这与Photoshop混合模式的工作方式非常相似 - 制作一些有趣的效果。

虽然在撰写本文时浏览器支持不是100％（这也是托了微软的福）设计师们已经在探索混合模式可以实现的目标。以下是我们发现的一些更令人兴奋的例子。

看混合可以制造的差异

让我们从这个方便的演示开始，它演示了每个混合模式对背景图像的作用。使用下拉菜单查看各种模式如何影响显示。变异量可能会让您大吃一惊。

这是CSS混合模式的一个非常实用的用法。在此库中选择一张照片，它不仅仅显示完整尺寸的图片。您还可以在背景中找到混合和模糊的图像版本，从而获得更加身临其境的体验。

使用CSS可能进行的图像处理量非常惊人。此工具提供视觉证明，可让您调整基本/中间/高光效果和使用的颜色。最终的结果可能是远远不同于原始的东西。

这张精心混合的照片提供了一个可以用CSS完成的实例。令人印象深刻的是样式表只有五行长。这是设置照片背景，添加渐变和完成混合的问题。您甚至无法在图像编辑器中快速创建此效果！

混合模式不仅可用于令人惊叹的图像效果。在这里，它在基于滚动的导航菜单中用作有用的微交互。用户可以根据菜单项的颜色不透明度查看他们正在阅读的当前章节。更重要的是，效果还表明你是在一章的开头还是结尾。jQuery也是一个很大的帮助，跟踪滚动位置。

多重曝光摄影的过程将两个图像合二为一。这个概念在这里用得很有效，背景照片与动画GIF相结合，创造出一种相当迷幻的东西。它也增强了玩一些经典视频游戏的冲动。

将混合模式与SVG文本相结合，您可以创建一些华丽的效果。在此示例中，创建了两层文本。一个是填充颜色，另一个是轮廓。然后将它们彼此偏移定位，从而产生这种引人注目的功能性外观。它甚至响应。

我们将结束我们的收藏，举例说明一点点创造力如何能够取得长足的进展。这种令人惊叹的彩虹色可能看起来很复杂。然而，它实际上由三个相当基本的CSS渐变和混合模式组成。有时，简单真的更好。

更好的是，他们采用了我们在印刷设计中长期看到的技术，并使其成为我们可以在网络上轻松实现的技术 - 无需图像编辑器。

花点时间尝试CSS混合模式，看看它们如何增强您的下一个项目。