背景だけを透過させる

要素を透明にするにはopacityが利用できますが、
opacityには要素の中身全てを透明にするという性質があります。
背景のみを透明させたい時とかは、rgbaを利用しましょう。

##rgb
rgbaを学ぶには、まずrgbというものを理解する必要があります。
rgbは色の指定の仕方の1つで、3つの値の組み合わせで表示する色を決めます。色を指定するときは#ffffffのようなカラーコードを使ってもrgbを使っても構いません。

style.css

.box {
 background-color: rgb(255, 147, 30);
}

.box{
 background-color: #ff931e;
}

##rgba
色を透明にしたいときは色をrgbaで指定します。rgbaは4つの値をコンマ（,）区切りで入れます。4つ目の値が透明にする度合いで、0 ~ 1の数値で指定します（値が小さいほど透明になります）。
opacityプロパティは要素全体を透過させますが、rgbaを使うとその色だけを透明にすることが出来ます。

index.html

<div class="rgba-sample">
 <p>rgbaの透過</p>
</div>
<div class="opacity-sample">
 <p>opacityの透過</p>
</div>

style.css

/* 背景だけ透過される */
.rgba-sample {
 background-color: rgba(84, 190, 238, 0.5);
}

/* 要素の中身も透過される */
.opacity-sample {
 background-color: rgb(84, 190, 238);
 opacity: 0.5;
}