他の "Try it Yourself" 例が下にあります。
opacity プロパティは、要素へ不透明度のレベルを設定します。
不透明度レベルとは、1 が不透明で、0.5 は 50% の透明度、0 は完全になります。
注: 要素の背景に透明度を追加するために opacity プロパティを使用する場合は、その子要素のすべてが同じ様に透明になります。 これは、テキストが読み難い完全に透明な要素になります。 不透明度を子要素に適用したくなければ、代わりに RGBA 色を使用します（下の「その他の例」を参照）。
| デフォルト値： | 1 |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | yes, 個別のプロパティを参照してください. animatable を参照 Try it |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.opacity="0.5" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
注: IE8 以前のバージョンは、代わりに次のような filter プロパティをサポートしています： filter:Alpha(opacity=50)。
opacity: number|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| number | 不透明度を指定します。0.0（完全に透明）～ 1.0（完全不透明）までの値です | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
要素の背景に透明度を追加するために opacity プロパティを使用する場合は、その子要素のすべてが同じ様に透明になります。 これは、テキストが読み難い完全に透明な要素になります：
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
上の例のように、子要素に不透明度を適用したくない場合は、RGBA カラー値を使用します。 次は、不透明度を背景色に設定しテキストには設定しません：
100% opacity
60% opacity
30% opacity
10% opacity
チップ: RGBA カラー詳細のについては、CSS3 Colors Chapter をご覧ください。
要素の不透明度を変更するために JavaScript を使用する方法：
function myFunction(x) {
// Return the text of the selected option
var opacity = x.options[x.selectedIndex].text;
var el
= document.getElementById("p1");
if (el.style.opacity
!== undefined) {
el.style.opacity = opacity;
} else {
alert("Your browser doesn't support this example!");
}
}
Try it Yourself ❯
CSS チュートリアル： CSS Opacity / Transparency
CSS チュートリアル： CSS3 RGBA Colors
HTML DOM リファレンス：opacity プロパティ