CSS の opacity プロパティは、要素の透明度、または要素の裏にあるコンテンツが見える度合いを設定します。

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

このプロパティを 1 以外の値で用いると、その要素は新しい重ね合わせコンテキストを作ります。

もし、子要素に透明度を適用したくない場合は、以下のように代わりに background プロパティを使用してください。

background: rgba(0, 0, 0, 0.4);

構文

<number>
number0.0 以上 1.0 以下で、チャネルの透明度 (つまり、アルファチャネルの値) を表します。範囲外の数値も有効ですが、近い方の限界値におさめられます。
意味
0 要素は完全に透明です (つまり、不可視です)
number0 より大きく 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 ロゴ" width="128" height="146"
  class="opacity">

アクセシビリティの考慮事項

文字列の opacity を調整した場合、テキストの色と、テキストが配置されている背景の色とのコントラスト比が、弱視の人がページの内容を読むことができる程度に十分高くなるよう確認することが重要です。

色のコントラスト比は、透明度を調整したテキストと背景色の明度の値を比較することで決定されます。現在のウェブコンテンツアクセシビリティガイドライン (Web Content Accessibility Guidelines, WCAG) によれば、文字列コンテンツで 4.5:1 以上、見出しのような大きめの文字列で 3:1 以上のコントラスト比が求められています。大きめの文字列とは、太字ならば 18.66px 以上、または 24px 以上と定義されています。

仕様書

仕様書 状態 備考
CSS Transitions
opacity の定義
草案 opacity をアニメーション可能として定義
CSS Color Module Level 3
opacity の定義
勧告 初回定義

初期値1.0
適用対象すべての要素
継承なし
メディア視覚
計算値指定値。[0,1] の範囲内にクリップされます
アニメーションの種類number
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1
完全対応 1
未対応 1 — 3.5
接頭辞付き
接頭辞付き -moz- のベンダー接頭辞が必要
IE 完全対応 9Opera 完全対応 9Safari 完全対応 1.2WebView Android 完全対応 1Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 9Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

このページの貢献者: mfuji09, Sebastianz, teoli, mitsuba-clover, ethertank, sosleepy
最終更新者: mfuji09,