By U Zensen.

欲しいものはプログラミングで自分で作る。

【css】rgbaとopacityの違いを超わかりやすく解説!!

2016 / 4 / 3 2016 / 10 / 30
CSS
1-compressor

はじめに!!

お疲れ様です。ぴーすけと申します。

cssを使って背景を透過させるには、「opacity」を使うと思います。しかし、opacityでは背景だけではなく内部の文字や画像なども同じように透過してしまいます。

背景だけを透過させたい時には「rgba」を使いましょう。

スポンサードリンク

opacityとrgbaの違い!!

opacityとは

opacity: 0.5;

上記のようにスタイルを設定すると要素が透過されます。0〜1の間で設定ができて、0が完全透過で1が完全不透過です。

rgbaとは

background: rgba(255, 255, 255, 0.5);

rgbaはbackgroundやcolorなどのプロパティに色を設定する際に使うもので、赤、緑、青、透明度を数値で設定できます。

rgba(赤、緑、青、透明度)という構成になっていて、赤、緑、青は0〜255の値、透明度は0〜1の値で設定ができます。

DEMO!!

opacity
rgba
opacity:1;
background:
rgba(107, 146, 184, 1);

いかがでしょうか?雰囲気は掴めたでしょうか?

opacityの場合

内部の文字や周りのボーダーまで一緒に透過されてしまいます。opacityは要素自体に値を設定するので、要素全体に効果が出てしまうのです。さらにその要素は子要素、孫要素、、、と効果が継承されてしまうので、opacityを設定した要素以下の要素もすべて透過されてしまいます。

rgbaの場合

背景だけが透過され文字やボーダーは透過されません。これは、rgbaはプロパティに対しての値だからです。要素のbackgroundプロパティに対して色や透明度の設定をしているだけなので他の要素に影響がないのです。ゴーストボタンなどはだいたいこれで実装されているんじゃないでしょうか?

まとめ!!

背景だけを透過させたい場合には、rgbaを使おう!

宣伝!!

こんなツールも作ってみました!

よかったら使ってみてください!

Pocket

コメント

コメントを残す