[9] 'opacity' 特性は不透明度を指定します。
不透明度はある種の後処理演算のようなもので、
適用対象の要素を裏でレンダリングしたものを適当な場所に混合する方法を決めるものとなります。 >>1
仕様書
- [1] CSS Color Module Level 3 ( 版) http://www.w3.org/TR/2011/REC-css3-color-20110607/#transparency
値
- [11]
<alphavalue> >>1 - [12]
inherit >>1
適用対象
[13] すべての要素に適用されます >>1。
[15] この特性は視覚媒体に適用されます >>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 未満の要素が位置付けされていないなら、
その要素を、その親stacking contextの内部において、位置付けされる要素が
z-index: 0; opacity: 1 である時と同じような stacking order
で描画しなければなりません。 >>1
[105] 不透明度が 1 未満の要素が位置付けされる場合には、
z-index は CSS 2.1 に従って適用しますが、
z-index: auto に限っては、 z-index: 0
として扱います。 (常に新しい stacking context が作られるからです。 >>1
[106] >>103, >>104, >>105 は SVG には適用されません。 SVG においては SVG 1.1
の規定によります。 >>1
歴史
'-moz-opacity'
[10] Gecko では長らく '-moz-opacity'
として実装されていました。 IDL属性としては
MozOpacity でした。
[6]
Firefox 2 では -moz-opacity は
opacity の別名になっています
(CSSOM に入る時点で opacity
に置換されます)。また、 DOM属性
MozOpacity も
opacity の別名になっているようです。
Opera 9 は -moz-opacity も
MozOpacity も未実装です。[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 プロパティの暫定的なサポート