0

据我了解，CSS 的mix-blend-mode行为方式应该与 Photoshop 的混合模式相同。但是，在下面的简单示例中，我得到了不同的结果，我不知道为什么。

例子

青色矩形 (#00ffff) 与红色矩形 (#ff0000) 重叠一半。青色矩形的混合模式设置为“变暗”。因为“变暗”为重叠像素选择每个通道（RGB）中最暗的，并且所有三个通道在两个矩形中的至少一个中都是 0，所以我希望重叠区域是黑色的。

Photoshop中的结果

（为清楚起见，勾勒出青色矩形）

  • 青色矩形在黑色背景上不可见（预期）
  • 重叠区域也是黑色的（预期）

在此处输入图像描述

网络上的结果（最新的 Chrome，70.0.3538.102）

  • 青色矩形在黑色背景上可见（不是预期的）
  • 重叠区域是暗的（#2d0c1b），但不是黑色（不是预期的）

在此处输入图像描述

现场示例：CodePen

那么......为什么结果不一样？我错过了什么？

4

1 回答 1

0

结果是相同的，但黑色背景应用于body您应用mix-blend-mode.

将黑色背景移到那里将解决问题：

body {
  background: black;
}
.group {
 background:#000;
}
.a, .b {
  width: 200px;
  height: 100px;
}

.a {
  background: #00ffff;
}

.b {
  background: #ff0000;
  margin-top: -50px;
  mix-blend-mode: darken;
}
<div class="group">
  <div class="a"></div>
  <div class="b"></div>
</div>

mix-blend-mode CSS 属性设置元素的内容应如何与元素的父级内容和元素的背景混合。参考

于 2018-11-18T13:26:48.233 回答