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.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
プロパティでアルファチャネルを使用できる色の値
を使用してください。
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
<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;
}
結果
仕様書
Specification |
---|
CSS Color Module Level 4 # transparency |
ブラウザーの互換性
BCD tables only load in the browser