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

【问题标题】：Different result when using mix-blend-mode and background-blend-mode使用混合混合模式和背景混合模式时的不同结果
【发布时间】：2017-04-29 01:27:34
【问题描述】：

我注意到使用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，因为不透明度不能应用于同一个对象。

【问题讨论】：

是的，您可以在同一个对象上应用不透明度...或者您不是指背景不透明度？
@vals 这个想法是颜色在柔光下是 51% 的不透明度，而背景保持在 100% 的不透明度。我不相信在这种情况下使用同一层是可能的。但是，我刚刚意识到这可能适用于 rgba - 刚刚尝试过，这似乎有效。但是，最初的问题仍然存在 - 为什么两种混合模式之间存在差异。
可以，可以使用rgba使背景色半透明，不影响背景图片
一个小提示，在 CSS 中制作 cmets 时使用 // 是无效的，可能会给您带来不可预知的结果，请改用 /* */
@LGSon 好点，不过我正在使用 sass :)

标签： css background-blend-mode mix-blend-mode

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

我可能遗漏了一些东西，但我不相信现在有任何图像正在混合？他们只是显示原始图像
@user2019515 没错。删除了样本，因为它们不能证明任何事情。
似乎在左右结果图像中都使用了“绿色”颜色，因此混合混合模式似乎也在使用绿色，但是，可能在不同的方式（我正试图深入了解）
@user2019515 进行了最后更新......我错过了我为mix-blend-mode描述它的一件事
@user2019515 再次更新+添加示例

【解决方案3】：

LGSon 已经给你一个很好的答案。

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

您在此处拥有的层是，从底部到顶部：

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

background-blendmode 应用 inside 背景元素，在本例中为第 2 层在第 1 层上

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

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

【讨论】：

谢谢 ... +1 ... 这看起来更学术 :)
尽管解释几乎相同:-)