复制加法混合的 CSS 混合模式

Question

我正在尝试在我的网站上创建一个RGB additive color model。

我正在使用以下代码：

#colorBox1 {
  background-color: rgb(255, 0, 0);
}

#colorBox2 {
  background-color: rgb(0, 255, 0);
  mix-blend-mode: screen;
}

#colorBox3 {
  background-color: rgb(0, 0, 255);
  mix-blend-mode: screen;
}

#colorBox4 {
  background-color: rgb(255, 255, 255);
  border: 1px solid black;
}

<div id="color">
  <div id="colorBox1" class="colorBox"></div>
  <div id="colorBox2" class="colorBox"></div>
  <div id="colorBox3" class="colorBox"></div>
  <div id="colorBox4" class="colorBox"></div>
</div>

* 我已经跳过了一些定位规则以使代码尽可能清晰

所以我期待这 3 种颜色混合成 rgb（255、255、255）的白色。但是当我预览页面时，颜色有点灰白色。它实际上是 rgb(248, 255, 253)。虽然 rgb(255, 255, 255) (colorBox4) 确实显示为 (255, 255, 255) 的纯白色 - 全部通过颜色选择器。

是不是 - css colors are different？ 只是显示器吗？ 或者是否有一种 CSS 混合方法或一系列 CSS 混合方法可以实现“真正的”颜色添加模式？

Answer 1

我没有看到你的结果。在此测试中，颜色正确混合。您如何确定混合区域的颜色？

.colorBox{
  position:absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
#colorBox1 {
    background-color: rgb(255,0,0);
    
}

#colorBox2 {
    background-color: rgb(0, 255, 0);
    mix-blend-mode: screen;
    left: 70px;
}

#colorBox3 {
    background-color: rgb(0, 0, 255);
    mix-blend-mode: screen;
    top: 70px;
    left:40px;
}

<div id="color">
        <div id = "colorBox1" class="colorBox"></div>
        <div id = "colorBox2" class="colorBox"></div>
        <div id = "colorBox3" class="colorBox"></div>
    </div>