使用混合混合模式和背景混合模式时结果不同

Question

我注意到，即使您使用相同的混合模式，使用mix-blend-mode结果也不同于使用结果background-blend-mode。

例如，比较下面的2个结果：

我已经在下面的设置和JSFiddles中复制了：

的HTML

<div class="background">
  <div class="overlay"></div>
</div>

的CSS

.background{
  width:200px;
  height:200px;
  //background-color:green; //toggle depending on what you want to use
  background-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

.overlay{
  width:100%;
  height:100%;
  background-color:green; //toggle depending on what you want to use
  mix-blend-mode:soft-light;
}

JSFiddle

使用混合混合模式：https : //jsfiddle.net/p8gkna87/

使用background-blend-mode：https : //jsfiddle.net/p8gkna87/1/

一些背景资料

我目前正在复制使用柔光混合模式的Photoshop设计，同时还使用51％的不透明度。因此它将无法使用，background-blend-mode因为不透明度不能应用于同一对象。

Answer 1

background-blend-mode融合了它background-image和它的background-color。

mix-blend-mode融合了它的背景下，什么是自己后面的部分，和它的background-color。

这是一篇描述mix-blend-mode得很好的文章：

• http://alistapart.com/article/blending-modes-demystified

换句话说，在您的情况下，mix-blend-mode您将绿色混合在图像顶部，而您background-blend-mode则相反。

因此，通过具有相同的层顺序，两者blend-modes看起来相同

.background,
.background2{
  display: inline-block;
}

.background{
  width:200px;
  height:200px;
  background-color:green;
}
.overlay{
  width:100%;
  height:100%;
  mix-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

.background2{
  width:200px;
  height:200px;
  background-color:green;
  background-blend-mode:soft-light;
  background-image:url('http://lorempixel.com/output/nightlife-q-c-640-480-2.jpg');
  background-size:cover;
}

<div class="background">
  <div class="overlay"></div>
</div>

<div class="background2">
</div>

Answer 2

LGson 已经为您提供了很好的答案。

只是为了进一步澄清一下：

这里的层从下到上是：

1. 背景元素背景颜色
2. 背景元素图像
3. 覆盖元素背景颜色

背景混合模式适用于背景元素内部，在本例中为第 2 层位于第 1 层之上

mix-blend-mode 将元素 3 应用到 1 + 2 的结果上

因此，如果只有其中之一有效，则顺序相反