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

Question

我有以下 CSS 代码：

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

渐变或 url 背景的位置可以改变。我认为这应该对混合顺序有任何影响。我的问题是如何应用这些模式来计算最终值？

浏览器是先应用blend-mode-1然后url('image-url')再linear-gradient(gradient)应用blend-mode-2first 的结果，url('image-url-2')还是反过来？

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

score 1 · Accepted Answer

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

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

混合模式作为应用于背景的任何逗号分隔属性应用，第一个应用于第一个图像，第二个应用于第二个，依此类推。

在你的例子中

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。

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

1 回答 1