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

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

Susan Sarandon
リリース: 2024-12-09 22:06:19
オリジナル
602 人が閲覧しました

Why Do Stacked Semi-Transparent Boxes Show Different Colors Depending on Their Order?

半透明ボックスを積み重ねた順序に応じた色のバリエーション

2 つの半透明ボックスを積み重ねた場合、観察される最終的な色は、順序に応じて異なります。並べる順番。この現象は、それぞれのケースで色の組み合わせが異なるために発生します。

色の違いの説明

最初のケースでは、上部のボックス (不透明度 50%) には以下が含まれています。青色であり、下部のボックスが赤色の 50% を占めることができます。したがって、全体の色は 50% の青と 25% の赤の組み合わせになります (赤の残りの 50% は青によって隠されているため)。

ただし、2 番目のケースでは、ボックスが逆になります。これで、上のボックスは赤の不透明度が 50% になり、下のボックスが 50% の青に寄与できるようになります。全体的な効果は、赤 50%、青 25% という異なる組み合わせになります。比率が異なるため、色が異なって見えます。

色の一貫性を実現する

ボックスの順序に関係なく同じ色を得るには、各レイヤーの色の比率が決まります。同一である必要があります。言い換えれば、上のレイヤーは、下のレイヤーのカラーと同じ比率を通過させる必要があります。

たとえば、次の設定を考えてみましょう:

  • 上のレイヤー: 不透明度 25% (0.25) ブルー
  • 下層: 不透明度 33.3% (0.333) red

このシナリオでは、両方のレイヤーで他の色の 25% が透けて見えます。したがって、順序に関係なく、結果の色は同じになります (青 25% と透明 75% の混合)。

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

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