<number>0から1までの数値
0は完全に透明、1は完全に不透明です。0.5なら要素全体が半透明になります。
opacity
要素全体の不透明度を決めるプロパティ。箱だけでなく、その中の文字や子要素も一緒に透ける様子を確かめます。
遊んでみよう
背後の模様まで見えるか比較
OPACITY文字も子要素も
CSS
.element opacity: 1;
値のパターン
opacityの構成要素
<percentage>パーセントでも指定可能
0%から100%でも同じ不透明度を表せます。50%は数値の0.5と同じです。
element + children子要素もまとめて合成
背景だけでなく、文字や画像など要素の中身を含めた全体へ不透明度を適用します。
早見表
初期値は1です。数値が小さくなるほど背後が見え、0にしても要素そのものはページ内に残ります。
01
1完全に不透明初期値02
0.75少し透ける75%03
0.5半透明50%04
0.25かなり透ける25%05
0完全に透明領域は残るよくある使い方
01
ホバーで画像を少し透かす
画像へマウスポインターを重ねたことを見た目で伝えるとき、transitionと組み合わせて滑らかに変化させます。
img:hover { opacity: 0.7; }02
背後の内容を見せながら重ねる
装飾用の図形や画像を半透明にすると、背後の色や模様を残した重なりを作れます。
opacity: 0.5;03
フェードの開始・終了状態を作る
要素を徐々に表示・非表示にするアニメーションでは、不透明度の両端を指定します。
from { opacity: 0; } to { opacity: 1; }ポイント
透明にしても、要素や操作は消えない。
opacity: 0でも要素はページ内に残り、ボタンやリンクはフォーカスやクリックの対象になり得ます。情報や操作を隠す目的ではdisplay・visibility・disabled属性などを用途に応じて使います。背景色だけを透かしたい場合は、opacityではなくアルファ値を持つ色を指定します。低いopacityで文字のコントラストが不足しないかも確認します。opacityはすべての要素に適用でき、通常は子要素へ継承されませんが、子要素を含む要素全体がまとめて合成されます。
関連するCSSも見てみよう。
opacity と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。