不透明度
読み: ふとうめいど
レイヤーや要素がどの程度背景を遮蔽するかを示す値。0% で完全透明、100% で完全不透明となる。
不透明度 (Opacity) は、画像レイヤーや UI 要素が背景をどの程度遮蔽するかを 0% から 100% の範囲で表す指標である。0% は完全に透明で背景がそのまま透過し、100% は完全に不透明で背景を完全に覆い隠す。透明度 (Transparency) とは足すと 100% になる関係にあり、不透明度 70% は透明度 30% に等しい。
不透明度とアルファチャンネルは密接に関連するが、適用レベルが異なる。
- 不透明度: レイヤー全体や要素全体に一律で適用される。Photoshop のレイヤーパネルや CSS の
opacityプロパティが代表例 - アルファチャンネル: ピクセル単位で透明度を制御する。画像データ自体に埋め込まれた情報
CSS での不透明度制御には 2 つの方法がある。
opacity: 0.5- 要素全体 (子要素含む) を半透明にする。テキストや子要素も一緒に透過するbackground-color: rgba(0, 0, 0, 0.5)- 背景色のみ半透明にし、テキストは不透明のまま保持する
画像編集ソフトでは、レイヤーの不透明度を下げることで下層レイヤーとの合成効果を調整する。活用例には、写真のダブルエクスポージャー風の表現や、テキストの背景に半透明のカラーオーバーレイを重ねる手法がある。
opacity はフェードイン / フェードアウトの実装に使われる。