opacity

概要

CSS の opacity プロパティは要素の不透明度を定義します。不透明度とは、要素の裏にある背景が覆われる程度を表します。

この値は子要素に継承されませんが、その効果は当該要素の内容を含む全体に及びます。すなわち、要素とそれに含まれる子要素は、互いを比べると異なる不透明度でありながら、その要素の背景に対しては同程度の不透明度となります。

このプロパティを 1 以外の値で用いると、その要素は新しいスタック文脈を作ります。

構文

/* 完全に不透明 */
opacity: 1;
opacity: 1.0;

/* 半透明 */
opacity: 0.6;

/* 完全に透明 */
opacity: 0.0;
opacity: 0;

/* グローバルな値 */
opacity: inherit;
opacity: initial;
opacity: unset;

値

<number>

0.0 以上 1.0 以下の <number> で、不透明度を表します。これはアルファチャンネルの値です。範囲外の値も有効ですが、近い方の限界値におさめられます。

値	意味
0	要素は完全に透明です（不可視です）
0 より大きく 1 未満の<number>	要素は半透明です（背景が見えます）
1	要素は完全に不透明です（中身が詰まっています）

形式構文

<number>

例

基本的な例

div { background-color: yellow; }
.light {
  opacity: 0.2; /* Barely see the text over the background */
}
.medium {
  opacity: 0.5; /* See the text more clearly over the background */
}
.heavy {
  opacity: 0.9; /* See the text very clearly over the background */
}

<div class="light">You can barely see this.</div>
<div class="medium">This is easier to see.</div>
<div class="heavy">This is very easy to see.</div>

:hover を使った透明度の変化

img.opacity {
  opacity: 1;
  filter: alpha(opacity=100); /* IE8 and lower */
  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
}
 
img.opacity:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
  zoom: 1;
}

<img src="//developer.mozilla.org/media/img/mdn-logo.png"
     alt="MDN logo" width="128" height="146"
     class="opacity">

仕様書

ブラウザ実装状況

[1] Mozilla 1.7 (Firefox 0.9) より前は、 -moz-opacity プロパティが非標準的な（受け継がれた）方法で実装されていました。Firefox 0.9 で動作が変更され、プロパティは opacity に改名されました。それ以来 -moz-opacity は opacity の別名としてサポートされました。

Gecko 1.9.1 (Firefox 3.5) 以降では、-moz-opacity のサポートをやめ、javascript での MozOpacity のサポートは Gecko 13 で取り除かれました 。今はもう opacity だけを使うべきです。

[2] バージョン 9 以前の Internet Explorer は opacity をサポートしておらず、代わりに filter プロパティの値として alpha(opacity=xx) と "alpha(opacity=xx)" （どちらも同義）をサポートしています。IE4 から IE9 では、拡張書式 progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)をサポートしていました。IE8 で導入された -ms-filter は、filter と同義語です。どちらも IE10 で消滅しました。

[3] -moz-opacity と同じように、 -khtml-opacity は 2004 年の初め（Safari 1.2 のリリース時）になくなっています。
Konqueror は -khtml-opacity をサポートしたことがありませんでしたが、opacity はバージョン 4.0 からサポートしてきました。

関連情報

• MSDN Microsoft's filter:alpha(opacity=xx)