ホームページ > ウェブフロントエンド > CSSチュートリアル > 半透明の箱を積み重ねると注文によって色が変わるのはなぜですか?

半透明の箱を積み重ねると注文によって色が変わるのはなぜですか?

Susan Sarandon
リリース: 2024-12-04 07:30:19
オリジナル
566 人が閲覧しました

Why Do Stacked Semi-Transparent Boxes Produce Different Colors Depending on the Order?

半透明ボックスの色の順序依存性

異なる色の 2 つの半透明ボックスを積み重ねると、同じ色が得られることが期待されます。重ねる順番に関係なく色が変わります。しかし、実験の結果、ボックスを並べる順番によって最終的な色が変わるという驚くべき現象が判明しました。

色の錯覚

この現象は、重ね合わせにより発生します。 2 つの半透明の層は色の知覚に影響を与えます。最初のケースでは、青いボックスを赤いボックスの上に置くと、観察される色は落ち着いた紫になります。これは、青いボックスの不透明度により赤色の強度が低下し、その輝きの 25% だけが透けて見えるためです。

ただし、順序を逆にすると、結果として生じる色は明るいピンクになります。これは、赤いボックスの不透明度が青色に大きく影響し、その強度が 25% に低下する一方、赤色の 50% が透けて見えるためです。

一貫した色の実現

この順序依存性を排除するには、積み重ね順序に関係なく、各色の割合が一貫していることを確認する必要があります。これは、各レイヤーの不透明度レベルを調整することで実現できます。

たとえば、次のシナリオを考えてみましょう:

  • 最上位レイヤーの不透明度 (青いボックス): 0.25
  • 最下層の不透明度 (赤いボックス): 0.333

下この配置では、重ね順に関係なく、各色の割合は 25% のままです。青いボックスが一番上にある場合、観察される色は薄紫 (青 25%、透明 75%) です。赤いボックスが上にある場合、観察される色も薄紫 (25% 赤、75% 透明) になります。

以上が半透明の箱を積み重ねると注文によって色が変わるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート