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 のプロパティで、要素の不透明度を設定します。不透明度は要素の裏にあるコンテンツが隠れる度合いであり、透明度の逆です。

試してみましょう

opacity: 0;

opacity: 0.33;

opacity: 1;

<section class="default-example" id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  background-color: #963770;
  color: white;
  padding: 1em;
}

構文

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
# propdef-opacity
Scalable Vector Graphics (SVG) 2
# ObjectAndGroupOpacityProperties

ブラウザーの互換性