看看现在流行的扁平化Web或APP设计，你可能还没意识到CSS赋予我们的神奇力量。你可能会认为我们把元素添加到一个平面上，实际上元素之间可能是重叠摆放的，甚至元素的多个背景图也有个堆叠顺序。就我个人而言，我希望目前的扁平化设计时代快点过去，我们将返回头去做些有深度的设计。

如果你熟悉Photoshop、Affinity Photo或 Pixelmator之类的图像后期处理、平面设计软件，那你可能对混合模式比较熟悉。在这些软件中，混合模式可以用来混合或合并不同的图像，以便创建各种不同的效果。

现在浏览器也原生支持这种能力，主要通过background-blend-mode和mix-blend-mode这两种CSS混合模式来实现。接下来，我们将逐个展示它们。首先从background-blend-mode开始，它用来混合元素的背景图像。