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

使用mix-blend-mode：https://jsfiddle.net/p8gkna87/

使用background-blend-mode：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看起来都是相同的

＆＃13;

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

＆＃13;

<div class="background">
  <div class="overlay"></div>
</div>

<div class="background2">
</div>

＆＃13;

Answer 2

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

只是为了进一步澄清：

这里的图层是从上到下的图层：

背景元素background-color
背景元素图片
overlay element background-color

background-blendmode在背景元素中应用，在这种情况下，在第1层上应用第2层

mix-blend-mode在1 + 2

因此，如果其中只有一个是有效的，那么顺序就是反向

Answer 3

我觉得mix-blend-mode在background-color没有background-blend-mode时也使用background-color进行混合。测试使用和更改"VPC1": { "Type": "AWS::EC2::VPC", "Properties": { "CidrBlock": "10.10.0.0/16", "InstanceTenancy": "default", "EnableDnsSupport": "true", "EnableDnsHostnames": "false", "Tags": [ { "Key": "Name", "Value": "My Dashboard" } ] } }, "subnet1": { "Type": "AWS::EC2::Subnet", "Properties": { "CidrBlock": "172.31.48.0/20", "AvailabilityZone": "us-east-2a", "VpcId": { "Ref": "VPC1" } } }, "subnet2": { "Type": "AWS::EC2::Subnet", "Properties": { "CidrBlock": "172.31.0.0/20", "AvailabilityZone": "us-east-2b", "VpcId": { "Ref": "VPC1" }, "Tags": [ { "Key": "Name", "Value": "MyDashboard" } ] } }, "subnet3": { "Type": "AWS::EC2::Subnet", "Properties": { "CidrBlock": "172.31.32.0/20", "AvailabilityZone": "us-east-2a", "VpcId": { "Ref": "VPC1" } } }： http://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-blend-mode

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

3 个答案: