0

我有以下 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 个?

4

1 回答 1

1

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

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

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

在你的例子中

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 之间的混合(您没有在示例中设置,但可以设置)

于 2016-02-28T09:21:37.553 回答