要素を透明にするには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
<divclass="rgba-sample"><p>rgbaの透過</p></div><divclass="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;}