Edit

Page

Page title:

Page body:

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

* 仕様書

- [1] [CITE@en[CSS Color Module Level 3]] ([TIME[2011-06-07 21:54:38 +09:00]] 版) <http://www.w3.org/TR/2011/REC-css3-color-20110607/#transparency>

* 値

- [11] [CODE(CSS)@en[[[<alphavalue>]]]] [SRC[>>1]]
- [12] [CODE(CSS)@en[[[inherit]]]] [SRC[>>1]]

** 適用対象

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

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

** 継承

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

** 算出値

[15] この[[特性]]の[[算出値]]は[[指定値]]の 
[CODE(CSS)@en[[[<alphavalue>]]]] を 0 [[以上]] 1 [[以下]]
の範囲に刳り抜いたものです [SRC[>>1]]。

* 値の刳り抜き

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

[3]
[CODE(CSS)@en[[[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]] 内の値は [CODE(CSS)[100]] のままになっています ([CODE(DOMm)@en[[[getComputedStyle]]]] では [CODE(CSS)[1]] になっています)。

[[Opera]] 9 だと [[CSSOM]] 内の値で既に [CODE(CSS)[1]] になっています。

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

* レンダリング

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

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

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

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

* 歴史

** [CODE(CSS)@en['-moz-opacity']]

[10] [[Gecko]] では長らく [DFN[[CODE(CSS)@en['[[-moz-opacity]]']]]]
として実装されていました。 [[IDL属性]]としては
[DFN@en[[CODE(DOMa)@en[[[MozOpacity]]]]]] でした。

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

;; [[Opera]] 9 は [CODE(CSS)@en[[[-moz-opacity]]]] も
[CODE(DOMa)@en[[[MozOpacity]]]] も未実装です。

[101] [CITE@en-us[Firefox 3.1 for developers - MDC]] ([TIME[2009-02-08 18:25:06 +09:00]] 版) <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] [CITE[Bug 3935 – mozilla-native pseudo classes and properties should be marked as such '''['''SELECT''']''']]
([TIME[2010-07-04 21:17:45 +09:00]] 版)
<https://bugzilla.mozilla.org/show_bug.cgi?id=3935>

[108] [[Firefox]] はもう [CODE(CSS)@en['[[-moz-opacity]]']] に対応していないようです。 [TIME[2013-08-28T11:41:47.00Z]]

** [CODE(CSS)@en['-khtml-opacity']], [CODE(CSS)@en['-webkit-opacity']]

[7] [DFN@en[[CODE(CSS)@en['[[-khtml-opacity]]']]]] は、
[[Safari]] 1.1 で実装された [[CSS]] [[特性]]。例 : [SAMP(CSS)[-khtml-opacity: 0.3]]

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

[109] [[Chrome]] はもう [CODE(CSS)@en['[[-khtml-opacity]]']] に対応していないようです。
[CODE(CSS)@en['[[-webkit-opacity]]']] にはまだ対応しています。 [TIME[2013-08-28T11:42:13.200Z]]

* 実装

[107] [[ニンテンドーDSiブラウザー]]は [CODE(CSS)@en['[[opacity]]']] に一応対応してはいるようですが、
実装がおかしいです。 [CODE(CSS)@en['[[opacity]]: 1']] の時に[[文字]]が[[レンダリング]]されなくなるなどします。
使わないほうが良さそうです。 [TIME[2012-06-25T07:11:19.000Z]]

[FIG(quote)[
[FIGCAPTION[
[16] [CITE@ja[ブラウザ JavaScript]]
([TIME[2015-03-14 20:55:29 +09:00]] 版)
<http://www.opera.com/docs/browserjs/>
]FIGCAPTION]

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

]FIG]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)