<p class="zw">看看现在流行的扁平化Web或APP设计，你可能还没意识到CSS赋予我们的神奇力量。你可能会认为我们把元素添加到一个平面上，实际上元素之间可能是重叠摆放的，甚至元素的多个背景图也有个堆叠顺序。就我个人而言，我希望目前的扁平化设计时代快点过去，我们将返回头去做些有深度的设计。</p> <p class="zw">如果你熟悉Photoshop、Affinity Photo或 Pixelmator之类的图像后期处理、平面设计软件，那你可能对混合模式比较熟悉。在这些软件中，混合模式可以用来混合或合并不同的图像，以便创建各种不同的效果。</p> <p class="zw">现在浏览器也原生支持这种能力，主要通过<code>background-blend-mode</code>和<code>mix-blend-mode</code>这两种CSS混合模式来实现。接下来，我们将逐个展示它们。首先从<code>background-blend-mode</code>开始，它用来混合元素的背景图像。</p>
