池州公司建站：8例惊人的CSS混合模式在行动中

近年来，Web设计，特别是CSS，呈现出一种可预测的模式。首先，我们创建特效大量利用图片、外部库或两者兼而有之。然后CSS出现并添加了这些功能--大大减少了对外部资源的需求。这意味着我们所需要的大部分幕后马力只是内置在浏览器中。

CSS混合模式就是这样的启示之一。它允许元素同时显示前景层和背景层的颜色。这作品在很大程度上，与Photoshop混合模式所做的一样--产生了一些有趣的效果。

池州公司建站在撰写本文时，浏览器支持还不是100%(谢谢您的支持)，或者几乎什么都没有微软(Microsoft)，设计师已经在探索混合模式可以实现什么。以下是我们发现的一些更令人兴奋的例子。

看到一个混合物能带来的不同

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

主题背景

下面是CSS混合模式的一个非常实用的用法。在这个图库中选择一张照片，它显示的不仅仅是全尺寸的图片.你还会在背景中找到一个混合的和模糊的图像版本，让你体验到更多的沉浸感。

滤料

潜在的图像处理的数量可能与CSS是有点惊人的。这个工具提供视觉证明，让你调整基础/中/高亮效果和使用的颜色。最终的结果可能是一些看起来与原来不同的东西。

小代码，大结果

这张精心混合的照片提供了一个坚实的例子，说明只要使用CSS就可以完成什么任务。更令人印象深刻的是，样式表只有五行长。这是一个设置一个照片背景，增加一个渐变和结束的混合。你甚至不能这么快地在图像编辑器中创建这个效果！

渐进导航

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

双重故障

过程多次曝光摄影把两幅图像合而为一。这个概念在这里产生了很大的效果，背景照片和动画GIF结合在一起，创造了一些相当迷幻的东西。它也增强了玩一些游戏的欲望。经典视频游戏.

完全RAD文本

结合混合模式与SVG文本，你可以创造一些华丽的效果。在本例中，创建了两层文本。一种是填充颜色，另一种是轮廓。然后，他们的位置相互抵消，导致这种引人注目的和功能的外观。甚至有反应。

无缝彩虹

我们将以一个例子来结束我们的收藏，一个小小的创造力如何可以发挥很大的作用。这令人惊叹的彩虹颜色可能看起来非常复杂。然而，它实际上是由三个相当基本的CSS梯度和一个混合模式组合而成的。有时候，简约真的更好。

混合突出

CSS混合模式为各种设计元素提供了一个很好的变化速度。虽然我们可以将它们与图像紧密联系在一起，但上面的例子也显示了其他一些有效的用途。诸如文本甚至导航之类的项目都会受益。

池州公司建站更好的是他们采用了我们早就知道的技术印刷设计我们可以很容易地在网络上实现它--不需要图像编辑器。

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