0

我使用 的screen值mix-blend-mode来组合三个 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>

4

1 回答 1

2

你做对了。问题是cssred, 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>

于 2017-11-19T16:58:30.050 回答