opacity

opacity

[9] 'opacity' 特性不透明度を指定します。 不透明度はある種の後処理演算のようなもので、 適用対象の要素を裏でレンダリングしたものを適当な場所に混合 (blend) する方法を決めるものとなります。 >>1

仕様書

適用対象

[13] すべての要素に適用されます >>1

[15] この特性視覚媒体に適用されます >>1

継承

[14] この特性継承されません >>1

算出値

[15] この特性算出値指定値<alphavalue> を 0 以上 1 以下 の範囲に刳り抜いたものです >>1

値の刳り抜き

[2] >>15 を普通に解釈すれば、算出値は刳り抜いた後の値なのですから、 指定値はくりぬく前の値です。

[3] opacity: 100 <http://suika.fam.cx/gate/2007/cssom/viewer?c=p%20%7B%0A%20opacity%3A%20100%3B%20%0A%7D;h=%3Cp%3EXXXXXXXXXX;p=n;x=style-element>

[4] >>3 Firefox 2 は CSSOM 内の値は 100 のままになっています (getComputedStyle では 1 になっています)。

Opera 9 だと CSSOM 内の値で既に 1 になっています。

[5] >>4 の値でも同様に、Firefox 2 では getComputedStyle から、 Opera 9 では CSSOM に入る時点から 0 になっています。

レンダリング

[103] 不透明度が 1 未満である場合、その要素は別途レンダリングしたものを合成するため、 その要素の内側にあるもののz軸方向の間に配置することはできません。 また、同じ理由により、不透明度が 1 未満要素について新しい stacking context を作らなければなりません>>1

[104] 不透明度が 1 未満要素位置付け (positioned) されていないなら、 その要素を、その親stacking contextの内部において、位置付けされる要素z-index: 0; opacity: 1 である時と同じような stacking order描画しなければなりません>>1

[105] 不透明度が 1 未満要素位置付けされる場合には、 z-indexCSS 2.1 に従って適用しますが、 z-index: auto に限っては、 z-index: 0 として扱います。 (常に新しい stacking context が作られるからです。 >>1

[106] >>103, >>104, >>105SVG には適用されません。 SVG においては SVG 1.1 の規定によります。 >>1

歴史

'-moz-opacity'

[10] Gecko では長らく '-moz-opacity' として実装されていました。 IDL属性としては MozOpacity でした。

[6] Firefox 2 では -moz-opacityopacity の別名になっています (CSSOM に入る時点で opacity に置換されます)。また、 DOM属性 MozOpacityopacity の別名になっているようです。

Opera 9 は -moz-opacityMozOpacity も未実装です。

[101] Firefox 3.1 for developers - MDC ( 版) <https://developer.mozilla.org/ja/Firefox_3.1_for_developers#.E6.96.B0.E3.81.97.E3.81.8F.E3.82.B5.E3.83.9D.E3.83.BC.E3.83.88.E3.81.95.E3.82.8C.E3.81.9F.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3>

opacityと類似した非推奨の -moz-opacity のサポートが削除されました。

[102] Bug 3935 – mozilla-native pseudo classes and properties should be marked as such [SELECT] ( 版) <https://bugzilla.mozilla.org/show_bug.cgi?id=3935>

[108] Firefox はもう '-moz-opacity' に対応していないようです。

'-khtml-opacity', '-webkit-opacity'

[7] '-khtml-opacity' は、 Safari 1.1 で実装された CSS 特性。例 : -khtml-opacity: 0.3

[8] Safari 1.2 では効かないらしい。

[109] Chrome はもう '-khtml-opacity' に対応していないようです。 '-webkit-opacity' にはまだ対応しています。

実装

[107] ニンテンドーDSiブラウザー'opacity' に一応対応してはいるようですが、 実装がおかしいです。 'opacity: 1' の時に文字レンダリングされなくなるなどします。 使わないほうが良さそうです。

[16] ブラウザ JavaScript ( 版) <http://www.opera.com/docs/browserjs/>

スタイルオブジェクトにおいて MozOpacity プロパティの暫定的なサポート