半透明のボックスが重なった場合、透明度は最終的な色にどのように影響しますか?

積み重ねられた半透明ボックスの色に対する透明度の影響

複数の半透明レイヤーが重なると、それらの色が組み合わされて新しい色合いが作成されます。得られる色は、レイヤーを重ねる順序によって異なります。これは、上のレイヤーの不透明度が下のレイヤーの色に影響するためです。

たとえば、半透明の青いボックスの上に半透明の赤いボックスを重ねると、他のレイヤーと比べて異なる色が生成されます。半透明の赤いボックスの上に半透明の青いボックスが重ねられています。最初のケースでは、赤いボックスは光の 50% を遮断し、青の 50% だけが透けて見えます。これにより、より紫色の色合いが得られます。 2 番目のケースでは、青いボックスが光の 50% を遮断し、赤色の 25% だけが現れます。これにより、明るい紫の色合いが作成されます。

重ね順に関係なく色の一貫性を維持するには、各レイヤーが同じ割合の色の影響を与えるようにしてください。質問で提供されている CSS の調整は次のとおりです。

.a {
  background-color: rgba(255, 0, 0, 0.333);
}

.b {
  background-color: rgba(0, 0, 255, 0.333);
}

.a > .b {
  background-color: rgba(0, 0, 255, 0.25);
}

.b > .a {
  background-color: rgba(255, 0, 0, 0.25);
}

この改訂された例では、最上層の不透明度 (0.25) は最下層の不透明度 (0.333) の 75% です。これにより、積み重ね順序に関係なく、色の比率が同じになることが保証されます。

以上が半透明のボックスが重なった場合、透明度は最終的な色にどのように影響しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。