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
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応112

1

1 — 3.5 -moz-

991.2
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応1 あり あり493.2 あり

関連情報

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

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