Question

我使用screen mix-blend-mode值来组合三个div，每个div都是红绿色和蓝色。我想我应该期待白色在组合div的中心，但颜色似乎关闭。我误解了这是如何工作的，还是我错误地使用它？谢谢。

请参阅以下代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你做得对。问题是，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

1 个答案: