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

Question

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

例如，比较以下两个结果：

​

​

我在下面的设置和JSFiddles中复制了以下内容：

<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/

使用背景混合模式：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已经给出了一个很好的答案。

为了进一步澄清这一点：

这里有从botton到顶层的层：

1. 背景元素背景颜色
2. 背景元素图像
3. 叠加元素背景颜色

背景混合模式将应用于中的背景元素，在本例中，第2层位于第1层。

混合混合模式将元素3应用于1+2的结果。

因此，如果其中一个是有效的，则顺序是相反的。

Answer 3

在我看来，当mix-blend-mode不使用background-color时，background-blend-mode也会使用background-blend-mode来混合它。