opacity

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

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

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

  • 初期値1.0
  • 適用対象全要素
  • 継承しない
  • メディアvisual
  • 計算値指定値。[0,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 以下の <数量> で、不透明度を表します。これはアルファチャンネルの値です。範囲外の値も有効ですが、近い方の限界値におさめられます。
意味
0 要素は完全に透明です(不可視です)
0 より大きく 1 未満の<数量> 要素は半透明です(背景が見えます)
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">

仕様書

仕様書 策定状況 コメント
CSS Transitions
The definition of 'opacity' in that specification.
草案 opacity のアニメーション可能化
CSS Color Module Level 3
The definition of 'opacity' in that specification.
勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 1.0 (1.7 or earlier)[1] 9.0[2]
8.0
4.0
9.0 1.2 (125)[3]
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 1.0 1.0 (1.7)[1] 9.0[2]
8.0
4.0
9.0 3.2

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

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 からサポートしてきました。

関連情報

ドキュメントのタグと貢献者

Contributors to this page: mitsuba-clover, ethertank, sosleepy
最終更新者: mitsuba-clover,