多种混合模式的应用顺序是什么？

Question

我有以下CSS代码：

div {
  background: url('image-url'), linear-gradient(gradient), url('image-url-2');
  background-blend-mode: blend-mode-1, blend-mode-2;
}

渐变或网址背景的位置可能会发生变化。我认为这应该对混合顺序有任何影响。我的问题是这些模式如何应用于计算最终值？

浏览器首先在blend-mode-1和url('image-url')上应用linear-gradient(gradient)，然后对第一个blend-mode-2的结果应用url('image-url-2')，还是反过来？ ？

我使用正确数量的背景混合模式还是需要指定3个？

Answer 1

背景图像的堆叠顺序是这里的关键因素。

您的背景图像以相反的顺序堆叠，列表中的第一个图像位于渲染堆栈的最上面。

blendmodes应用于背景上应用的任何逗号分隔属性，第一个应用于第一个图像，第二个应用于第二个，依此类推。

在你的例子中

div {
  background: url('image-url'), linear-gradient(gradient), url('image-url-2');
  background-blend-mode: blend-mode-1, blend-mode-2;
}

url2位于底部。

在它上面，你有渐变，应用了blend-mode-2。

在它上面，图片网址为blend-mode-1。

您可以设置第三个背景混合模式。在这种情况下，它适用于image-url-2和background-color之间的混合（你没有在你的例子中设置，但可以设置）