web-dev-qa-db-ja.com

子要素が親の不透明度をより大きな値で上書きできないのはなぜですか?

ご存知のように、現時点では、子要素はその親のopacityプロパティをオーバーライドできません。親のopacityプロパティは常に有効です。

これは、子が親の不透明度をオーバーライド(小さい値でオーバーライド)しようとしている場合に意味があります。しかし、子供がそれをより大きな値で上書きしようとしている場合はどうでしょうか?それは許されるべきではないのですか?半透明の親が不透明な子供を持つことができないのはなぜですか?なぜそのような制限がCSS設計の一部として決定されたのかについて誰かが意見を共有できますか?

誰かがこれの理論的な理由に光を当てることができれば本当に感謝します。私は基本的に、なぜこれができないのかを見つけようとしています(回避策ではありません。すでに何度も話されているためです)。これは私のような初心者SO'ersの多くが知っていることだと確信しています。

36
techfoobar

「オーバーライド」または「アンダーライディング」として見たことはありません。それはrelative不透明度の問題です。親が0.5の不透明度を持っている場合、子も(親のスタックコンテキストに関連して)不透明度を持っています。子は01の間に独自の不透明度値を持つことができますが、常に親の不透明度を基準にします。したがって、子にもopacity: 0.5が設定されている場合、親の兄弟の不透明度0.25は、不透明度1になります。

spec は、それをアルファマスクとして扱い、不透明度を削除することしかできません。要素は不透明であるか、ある程度の透明性があります(何か< 1):

不透明度は後処理操作と考えることができます。概念的には、要素(その子孫を含む)がRGBAオフスクリーンイメージにレンダリングされた後、不透明度設定により、オフスクリーンレンダリングを現在の複合レンダリングにブレンドする方法が指定されます。

以降:

オブジェクトがコンテナー要素の場合、効果は、コンテナー要素の内容がマスクを使用して現在の背景に対してブレンドされているかのようになり、マスクの各ピクセルの値は<alphavalue>です。

whyはそのように実装されていましたが、「それを禁じよう」という意味では意図的ではなかったと思います。たぶん、このアプローチは計算がより簡単なために選択されたものであり、後になって何か違うものに対する実際の必要性が認識されました(そしてrgbacolorbackground-colorが導入されました–そして私は間違っているかもしれませんタイムラインについてはこちら)。

43
bfavaretto