opacity

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

opacity は CSS のプロパティで、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。

構文

css

opacity: 0.9;
opacity: 90%;

/* グローバル値 */
opacity: inherit;
opacity: initial;
opacity: revert;
opacity: revert-layer;
opacity: unset;

値

<alpha-value>

<number> を 0.0 以上 1.0 以下で、また <percentage> を 0% 以上 100% 以下で、チャネルの不透明度（つまり、アルファチャネルの値）を表します。範囲外の数値も有効ですが、近い方の限界値に丸められます。

値	意味
`0`	要素は完全に透明です（つまり、不可視です）。
`0` と `1` の中間にある何れかの `<number>`	要素は半透明です（つまり、要素の背後のコンテンツが見えます）。
`1` （既定値）	要素は完全に不透明です（中身が詰まって見えます）。

解説

opacity の値は子要素に継承されませんが、要素のコンテンツを含む全体に適用されます。すなわち、ある要素とその子の不透明度が互いに異なっていたとしても、その要素の背景に対してはすべて同じ不透明度になります。

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

背景の不透明度のみを変更したい場合は、background プロパティでアルファチャネルを使用できる色の値を使用してください。

css

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

アクセシビリティの考慮

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

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

公式定義

初期値	`1`
適用対象	すべての要素
継承	なし
パーセント値	map to the range `[0,1]`
計算値	指定値の `<number>` が [0.0, 1.0] の範囲内にクリップされたものと同じ
アニメーションの種類	計算値の型による

形式文法

opacity = 
  <opacity-value>  

<opacity-value> = 
  <number>      |
  <percentage>

例

基本的な例

次の例では、opacity プロパティで要素とその内容全体の不透明度を変更することで、テキストを非常に読みにくくしています。

HTML

html

<div class="light">何とか見える程度でしょう。</div>
<div class="medium">簡単に見えるでしょう。</div>
<div class="heavy">とても見やすいでしょう。</div>

CSS

css

div {
  background-color: yellow;
  font-weight: bold;
  font-size: 130%;
}
.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 */
}

結果

ホバー時の透明度の設定

次の例では、ホバー時に不透明度を変更し、親要素の縞模様の背景画像が透けて見えるようにしています。

HTML

html

<div class="wrapper">
  <img
    src="//interactive-examples.mdn.mozilla.net/media/dino.svg"
    alt="MDN Dino"
    width="128"
    height="146"
    class="opacity" />
</div>

CSS

css

img.opacity {
  opacity: 1;
}

img.opacity:hover {
  opacity: 0.5;
}

.wrapper {
  width: 200px;
  height: 160px;
  background-color: #f03cc3;
  background-image: linear-gradient(
    90deg,
    transparent 50%,
    rgba(255, 255, 255, 0.5) 50%
  );
  background-size: 20px 20px;
}

結果

仕様書

Specification
CSS Color Module Level 4 # transparency

ブラウザーの互換性

BCD tables only load in the browser