4

我注意到，即使您使用相同的混合模式，使用时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，因为不透明度不能应用于同一个对象。

4

3 回答 3

7

background-blend-mode与 itsbackground-image和 its混合background-color。

mix-blend-mode与它的背景、它背后的部分以及它的background-color.

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

换句话说，在您的情况下，您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>

于 2016-12-13T21:16:41.570 回答
3

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

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

您在此处拥有的图层从下到上是：

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

background-blendmode 应用于背景元素内部，在本例中为 layer 2 over layer 1

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

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

于 2016-12-13T22:12:22.120 回答
0

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

于 2016-12-13T21:08:16.070 回答