css - 使用 mix-blend-mode 和 background-blend-mode 时的不同结果

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/

使用背景混合模式: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 你做相反的事情。

因此，通过具有相同的层顺序，两个混合模式看起来相同

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