使用 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

在我看来 mix-blend-mode 也使用 background-color 来混合它，而 background-blend-mode 没有。测试使用和更改 background-color 以及： http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-blend-mode

Answer 2

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 3

你已经从 LGSon 得到了一个很好的答案。

进一步澄清一下：

你这里的图层是，从底部到顶部：

背景元素背景颜色
背景元素图片
叠加元素背景颜色

background-blendmode 应用inside background 元素，在本例中是图层 2 over layer 1

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

所以，如果只有其中一个有效，则顺序是相反的

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

Different result when using mix-blend-mode and background-blend-mode

css

background-blend-mode

mix-blend-mode