CSS3

プロパティ

opacity

→●、mdn

不透明度。

不透明度は、後処理演算と捉えることができる。概念的には、要素（その子孫も含めて）が RGBA オフスクリーン画像に描画されてから、不透明度の設定が その描画を 現在の組成描画へ混色する方法を指定する。詳細は 単純 alpha 組成法 を見よ。

<alpha-value> ○

＝<number>
| <percentage>

要素に適用される不透明度。この不透明度は、［ある特定の色に対し、ではなく、要素全体に適用される］ことを除いて、rgb() における不透明度の定義と同じに解釈される。

<number> ○

0 ～ 1（透明～不透明）。

開始<SPAN style="border:1px solid red;
 opacity:0.2;
">テスト</SPAN>終了

<percentage> ○

0% ～ 100%（透明～不透明）。

開始<SPAN style="border:1px solid red;
 opacity:20%;
">テスト</SPAN>終了

opacity プロパティは、指定された不透明度を［要素とその内容すべてに対し、一体として］適用する ― 各子孫ごとに、ではなく。これは、次を意味する：

• 要素の opacity が 1 未満のときでも、要素の不透明な子が要素の背景を塞ぐ部分は そうあり続けるが、一体としての［要素、その子たち］は、自身を透かして下層のページを示すことになる。
• 要素内にあるすべての文字に対応するグリフたちは、一体として扱われる ― 複数の部位が重なり合っていても、不透明度が増えることはない。

  ¶図を省く

各グリフに対し別々な不透明度が欲される場合、opacity プロパティを設定するのではなく、不透明度を含む色値を利用して達成できる。

【要素が生成する】ボックスの opacity が 1 未満の場合、ボックスは、その子ボックス用に積層文脈 を形成する（これは、z‐軸において、ボックスの内容に、ボックスの外側の内容が差し挟まれるのを防止する）。

更には、ボックスに z-index プロパティが適用される場合、その値 auto は 0 に扱われる。他の場合、親の積層文脈の中で［積層レベル 0 を伴う有位置 な要素と同じ層］に塗られる（z-index が 0 にされた有位置な要素であったかのように）。

積層文脈についての更なる情報は、[CSS2] の［§ 多層化された呈示、付録 E］を見よ。

これらの z‐順序についての規則は、SVG 要素には適用されない ― SVG には、自前の描画モデル（[SVG2] § 描画順序）があるので。

テスト