【CSS】2種類の透明度「rgba」と「opacity」の違いについて

最終更新日 2024.09.17

CSSで透明度を表す「rgba」と「opacity」の違いについて解説していきます。

両者はともに透明度を設定することができますが、透明になる対象の要素が異なりますのでそれぞれの特徴と違いについて解説します。

1. 「rgba」と「opacity」の違いについて

「rgba」が指定した色を透過させるのに対し、「opacity」は要素全体（ボーダーや背景、子要素を含む全ての要素）が透過されます。

指定した色を透過させることができます。「カラー（rgb）」と「透明度（a）」の2つを設定して表現します。透明度は0~1の数値が指定でき、数字が小さいほど透明度が高くなります。

■「rgba」で透明度の設定を行った場合

背景だけが透過されて中のテキストは透過されません。

＜元の要素＞

background-color: rgb(0, 153, 255);

＜rgbaを設定した要素＞

background-color: rgba(0, 153, 255, 0.5);

指定した要素全体を透過させることができます。（指定した要素のボーダーや背景だけでなく子要素を含む全ての要素が透過されます。）透明度は0~1の数値が指定でき、数字が小さいほど透明度が高くなります。

■「opacity」で透明度の設定を行った場合

背景と中のテキストの両方が透過されます。

＜元の要素＞

background-color: rgb(0, 153, 255);

＜opacityを設定した要素＞

opacity: 0.5;

CSSで設定できる2種類の透明度「rgba」と「opacity」の違いについて解説してきました。

「rgba」が指定した色を透過させるのに対し、「opacity」は要素全体（ボーダーや背景、子要素を含む全ての要素）が透過されます。

両者は透明になる対象が異なりますので、用途に応じて使い分けましょう！