赤色の緑色と青色のdivを組み合わせるときに、スクリーンミックスブレンドモードを使用して白を取得する

mix-blend-modeのscreenの値を使用して、赤と緑のそれぞれの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>

出典

2017-11-19 Scott Marley

：

は、このコードスニペットを参照してください。事実は、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>

を

出典

2017-11-19 16:58:30 Kangouroops

赤色の緑色と青色のdivを組み合わせるときに、スクリーンミックスブレンドモードを使用して白を取得する

答えて

関連する問題