0

screenの値を使用してmix-blend-mode、赤、緑、青のそれぞれに 1 つずつ、3 つの 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