CSSのrgbaで透過する方法とopacityとの違い

rgbaを使うと透過させる事ができます。opacityと同じく0〜1が範囲となります。

0.7

0.5

0.1

cssです。

<div style="width: 100px; height: 100px; background-color: rgba(0,0,0,0.7);">0.7</div>
<div style="width: 100px; height: 100px; background-color: rgba(0,0,0,0.5);">0.5</div>
<div style="width: 100px; height: 100px; background-color: rgba(0,0,0,0.1);">0.1</div>

rgba(0,0,0,1)で、黒色で透過度が1（不透明）となります。0にすると透明になります。

rgbaはプロパティではなく、上記の様に値として使用します。

opacityとの違い

これはopacityでも実現する事ができます。opacityも同じく0〜1を指定します。

0.7

0.5

0.1

cssです。

<div style="width: 100px; height: 100px; background-color: rgb(0,0,0);opacity:0.7;">0.7</div>
<div style="width: 100px; height: 100px; background-color: rgb(0,0,0);opacity:0.5;">0.5</div>
<div style="width: 100px; height: 100px; background-color: rgb(0,0,0);opacity:0.1;">0.1</div>

rgbaと違い、opacityで指定した場合は中身の文字列も透明になっていっています。背景だけを透明にしたい場合などはrgbaを使えば良いと思います。

アニメーションなどで全体的に消したりする場合はopacityを使えば良いかと思います。