半透明ボックスを積み重ねた順序に応じた色のバリエーション
2 つの半透明ボックスを積み重ねた場合、観察される最終的な色は、順序に応じて異なります。並べる順番。この現象は、それぞれのケースで色の組み合わせが異なるために発生します。
色の違いの説明
最初のケースでは、上部のボックス (不透明度 50%) には以下が含まれています。青色であり、下部のボックスが赤色の 50% を占めることができます。したがって、全体の色は 50% の青と 25% の赤の組み合わせになります (赤の残りの 50% は青によって隠されているため)。
ただし、2 番目のケースでは、ボックスが逆になります。これで、上のボックスは赤の不透明度が 50% になり、下のボックスが 50% の青に寄与できるようになります。全体的な効果は、赤 50%、青 25% という異なる組み合わせになります。比率が異なるため、色が異なって見えます。
色の一貫性を実現する
ボックスの順序に関係なく同じ色を得るには、各レイヤーの色の比率が決まります。同一である必要があります。言い換えれば、上のレイヤーは、下のレイヤーのカラーと同じ比率を通過させる必要があります。
たとえば、次の設定を考えてみましょう:
このシナリオでは、両方のレイヤーで他の色の 25% が透けて見えます。したがって、順序に関係なく、結果の色は同じになります (青 25% と透明 75% の混合)。
以上が半透明の箱を積み重ねると、順序によって色が変わるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。