HOME > > > opacityとrgbaの違いは?cssで背景を透過する方法

opacityとrgbaの違いは?cssで背景を透過する方法

cssで透過

cssを使って背景を透過する時は「opacity?」「rgba?」「color?」どれを使ったらいいの?

CSS3.0以前は背景を透過する時は、photoshopなどの画像編集ソフトで透過したものを「PNG」形式で書き出していました。
今でもブラウザなどに合わせたり複雑な背景を使用する場合は画像を使いますが、単色である場合はcssで対応する事が多くなりました。
その際背景色を透過する場合はどうしたらいいのか。
opacityを使って設定する?rgbaを使って設定する?どう違うの?
今回は両方実験してみましょう。

サンプルはこちら

opacityを使って透過してみる

まずはopacityを使って透過してみます。
透過するのは背景を緑色(RGB:#54af44)にしただけのdivです。

オリジナル

html


<div class="box">
 opacityで透過
</div>

CSS


.box{
 background-color: #54af44;
 opacity: 0.5;
}

結果

結果、opacityで囲むと文字の色も透過しちゃますね。

opacity

rgbaを使って透過してみる

次にrgbaを使って透過してみます。

html


<div class="box">
 rgbaで透過
</div>

CSS


.box{
 background-color: rgba(84,175,68,0.5);
}

結果

rgbaで背景色を透過すると文字はきちんと表示され、背景のみが透過になりました。

rgba

rgba解説

rgbは文字通り赤(R)緑(G)青(B)の三原色。「a」は透過のalpha値の事です。
上記で設定している緑色は「赤(84)青(175)68(緑)」で「#54af44」の色を表現し、「a(alpha)0.5(半分透明)」で透過しています。
RGB色を設定する時はPhotoshopなどのカラーピッカーで確認できます。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket

2014.06.13