問題
10背景を透過させてみよう
CSSで背景を透過させるには、RGBaで背景色と透過度合いを設定します。 CSSでは透過効果のあるプロパティとして「opacity」が用意されていますが、背景のみを透過させる場合はRGBaで記述します。シーンに合わせて使い分けられるようにしておきましょう。
CSSの問題に挑戦しよう！
問題
「背景を透過させてみよう」
用意した青い背景を透過させて、見本画像のように表示しましょう。
あらかじめエディタに書くコード
<div class="back_image">
<div class="text">
ninjacodeninjacode
ninjacodeninjacode
ninjacodeninjacode
ninjacodeninjacode
</div>
</div>
¥HTML¥
.back_image {
height: 200px;
padding: 30px;
background: rgba(0,0,250);
}
¥CSS¥
期待する画面
解答と解説（背景を透過させてみよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
背景だけを透過させるには、RGBaで指定します。
色指定をする際に使用していたRGBに透明度(alpha)を加えたものです。
書き方はほとんど一緒で、カンマで区切って指定します。
透明度の値は、透明度1から0の間で小数点を使って指定します。
これはopacityプロパティで指定する方法と同じになります。
opacityプロパティで透過することも可能ですが、今回のような背景に適用する場合は、opacityを使ってしまうとテキストも一緒に透過されてしまうため、RGBaを使用します。部分的なものなどであれば、opacityを使用すると良いでしょう。
ポイント
RGBaとは
RGBaとは、色を扱う際の表記法のひとつで、赤（Red）、緑（Green）、青（Blue）、透明度（Alpha）の組み合わせからなる表現方式です。IT分野では、透過度の情報のことをアルファ値と言います。
透過度が組み合わさることであらゆる色の表現とともに半透明の表現ができるようになり通りの色表現ができるようになります。
しかしこれだけ種類が多くてもイメージした透明度の数値を調べるのは大変です。
そのような場面では、rgbaジェネレーターを使いましょう。
いくつかの種類の無料ジェネレーターが公開されているので検索して選りすぐりのものを使用しましょう。
opacityとは
opacityとは、要素の不透明度を設定するために用意されたCSSのプロパティです。
使用する際の値には、要素の不透明度を0から1までの数値で指定するか（0が透明、1が不透明）、0%~100%のパーセンテージで指定します。
背景を透過させたい場合、初心者の場合opacityで透過を試みると思いますが、opacityを背景にあてた場合、背景上にあるテキストなどの要素も一緒に透過されてしまいます。
背景のみを透過させたい場合はRGBaを使った指定が必要になります。
間違えやすいポイントなので覚えておきましょう。
