opacity

<alpha-value>

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

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

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

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

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

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

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

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

• WebAIM: Color Contrast Checker
• MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

opacity = 
  <alpha-value>  

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

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

HTML

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

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

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

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;
}

結果