要素の透過 opacityとrgbaの使い分け

CSSで透明度を指定できる「opacity」と「rgba」の違いと使い分けについてご紹介します。

opacity

opacityは要素の透明度を指定するプロパティです。

使い方

透明度は、0（完全に透明）～1（完全に不透明）の数値で指定します。
opacityを指定すると、要素全体（要素の中身や子要素）が透過されます。

 

SAMPLE

・html

・css

rgba

rgbaは色・透明度を指定するプロパティです。

使い方
li {background-color: rgba(255,255,255,0.7);}

RGBカラーモデルのred・green・blueにalphaが加わったもので、
最後に記述するalpha（上記の例だと0.7）で透明度を表します。

alphaは、0（完全に透明）～1（完全に不透明）の数値で指定します。

 

SAMPLE

・html

・css

使い分け

・img画像等、要素全体を透化する場合はopacity
・背景画像など、一部の要素（親要素だけ 等）を透化する場合はrgba