链接多个混合模式

background-blend-mode CSS 属性在 许多方面 都很巧妙。 它使开发人员能够将一个 background-image 与自己的 background-color 混合，甚至与应用于同一元素的另一个 background-image 混合。

更有趣的是，您可以将这些混合模式链接在一起。 如果您向元素添加多个背景图像，您还可以声明哪个背景应该使用哪个特定的混合模式。

但首先，在开始将值链接在一起之前，值得重申一下我们目前对 background-blend-mode 属性的了解。 让我们回顾一下基础知识。

混合背景图像和背景颜色

要将 background-image 与 background-color 混合，我们将所有三个属性应用于单个元素

.container {
  background-color: red;
  background-image: url(...);
  background-blend-mode: multiply;
}

除了 multiply 之外，还有很多其他值。 因此，在我测试每个值时，我决定创建一个简单的菜单来依次选择每个值。 通过少量 JavaScript 代码，我们可以将此属性的一个值替换为另一个值。

在下面的演示中，请确保使用相同的混合模式选择不同的颜色，以查看会发生什么

查看 CodePen 上 CSS-Tricks 的 背景混合模式 演示（@css-tricks）。

到目前为止，这可能是您在以前演示中看到 background-blend-mode 被使用的方式，因为将一个图像叠加在背景颜色之上确实非常漂亮。 但我们可以用这个属性做更多的事情。

混合多个背景图像

要将两个或更多图像混合在一起，我们需要将它们添加到逗号分隔的列表中，如下所示

.container {
  background-image: url(...), url(...);
  background-blend-mode: multiply;
}

查看 CodePen 上 Robin Rendle 的 具有多个图像的背景混合模式 演示（@robinrendle）。

在此演示中，background-image 列表中的第一项是我们的基础，我们声明了第二张图像应该如何在它之上叠加。 但我们不需要将两个单独的图像叠加在一起，因为我们可以通过将相同的背景图像叠加在自己身上并混合结果来创建许多美丽的视觉效果。

.container {
  background: url(...), url(...);
  background-position: 0 0, 0 -10px;
  background-blend-mode: screen;
}

查看 CodePen 上 CSS-Tricks 的 使用单个图像的背景混合模式 演示（@css-tricks）。

直到最近，我还不知道你可以像这样用逗号分隔背景位置元素。 前两个零将定位第一个图像，第二对将定位第二个图像。 这让我想知道我们是否可以对混合模式做同样的事情，结果证明（剧透！）我们完全可以。

使用多个混合模式混合多个图像

我们希望控制每层如何受到特定混合模式的影响，因为默认情况下，每个图像都将简单地继承当前设置的模式。 在下面的代码中，我们希望将两个背景图像相乘，然后我们希望使用线性渐变筛选最后一个背景图像。 它有效！

.container {
  background: url(...), url(...), linear-gradient(#999, red);
  background-position: 0 0, 0 10px, 0 0;
  background-blend-mode: multiply, screen;
}

在此演示中，我添加了两个背景图像和三个线性渐变，以及四个混合模式

查看 CodePen 上 Robin Rendle 的 具有多个图像和渐变的背景混合模式 演示（@robinrendle）。

我还向鸟类图像的 background-position 添加了一个动画，以说明它们确实是独立的层。 然而，在实际应用中，我不建议像这样单独动画 background-position 属性，因为 性能问题。

我相信用这种将多个背景图像、渐变和混合模式链接在一起的技术可以实现更多有趣的效果。 同时，请务必查看 background-blend-mode 的年鉴条目，以查看任何更新以及我们发现的任何更奇怪的技巧。