组合红绿蓝div时使用屏幕混合混合模式变白

Question

我正在使用 mix-blend-mode 的 screen 值来组合三个 div，红绿蓝各一个。我想我应该期望组合 div 的中心是白色，但颜色似乎不对。我是不是误解了它是如何工作的，还是我使用不当？谢谢。

查看此代码片段：

body {
  background-color: black;
}

.shape {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  mix-blend-mode: screen;
  position: absolute;
}

#red {
  background-color: red;
  left: 75px;
}

#green {
  background-color: green;
  top: 125px;
}

#blue {
  background-color: blue;
  top: 125px;
  left: 150px;
}

<body>
  <div class="shape" id="blue"></div>
  <div class="shape" id="red"></div>
  <div class="shape" id="green"></div>
</body>

Answer 1

你做得对。问题是 css red, blue, green 不是纯红色、纯蓝色和纯绿色，可以由您使用的浏览器解释。

相反，您应该使用：

#FF0000;
#00FF00;
#0000FF;

body {
  background-color: black;
}

.shape {
  width: 300px;
  height: 300px;
  border-radius: 150px;
  mix-blend-mode: screen;
  position: absolute;
}

#red {
  background-color: #FF0000;
  left: 75px;
}

#green {
  background-color: #00FF00;
  top: 125px;
}

#blue {
  background-color: #0000FF;
  top: 125px;
  left: 150px;
}

<body>
  <div class="shape" id="blue"></div>
  <div class="shape" id="red"></div>
  <div class="shape" id="green"></div>
</body>

组合红绿蓝div时使用屏幕混合混合模式变白

Using screen mix-blend-mode to get white when combining red green and blue divs

html

css

mix-blend-mode