積み上げられた半透明の箱が順序によって異なる色に見えるのはなぜですか?

積み重ねられた半透明のボックスの色の知覚

2 つの半透明のボックスを積み重ねた場合、組み合わせたものの知覚される色レイヤーは配置される順序によって異なります。この現象の背後にある理由を理解するために、CSS の不透明度の概念を詳しく見てみましょう。

不透明度は、要素の透明度を 0 (完全な透明) から 1 (完全な不透明) までの範囲で定義します。指定された例では、半透明のボックスの CSS は不透明度を 0.5 として定義し、各レイヤーの透明度が 50% であることを示しています。

赤い背景のレイヤーが青い背景の上に配置された場合、目は下層の 50% の青と上層の 25% の赤の組み合わせを認識します。これは、上のレイヤーの 50% の透明度により、下のレイヤーの色の半分が透けて見えるためです。

ただし、順序が逆で、青色の背景が上にある場合、目には 50% の赤色の組み合わせが表示されます。最下層から 25% の青、最上層から 25% の青。この比率の変化により、知覚される色が異なります。

一貫した色の達成

ボックスが積み重ねられた順序に関係なく、同じ知覚される色を確保するには、両方のレイヤーで同じ色の比率を維持するために必要です。この例では、次のように不透明度の値を調整することでこれを実現できます。

内側のレイヤー (単色を含む) の場合:

opacity: 0.25;

外側のレイヤー (ソリッド カラーを含む)半透明色):

opacity: 0.333;

これらの調整により、両方のレイヤーの色の強度が同じ 25% になり、知覚される色が同じになります。積み重ねる順序は関係ありません。

以上が積み上げられた半透明の箱が順序によって異なる色に見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。