今回は、「背景色（background-color）だけを透過させる方法」について紹介します。
opacityだと全ての要素が透過するので、背景色だけ薄くしたいときに使えます。
背景色（background-color）だけを透過させる方法
結論から言うと、背景を透過させる場合は「rgba()」を使用することで解決します。
完成形はこちら。
rgba（）とは？
RGBAとは、色を示すRGBのred・green・blueに、透明度を示すalphaが加わったもの。
「rgba()」は、RGBの色を0～255で、透明度を0（透明）～1（不透明）で指定します。
サンプルコードを書いてみよう
rgba()」を使って背景色を透過させる方法はこちら。
◎HTML
<div class="btn">
<a href="">
背景色が薄くなります
</a>
</div>
btnクラスの中にaタグを用意します。
◎CSS
.btn a {
display: inline-block;
padding: 30px 60px;
color: #fff;
background-color: rgba(51, 51, 51, 0.7);
}
background-colorにrgbaを指定したらOK。
最後の0.7の部分で薄さを調整することが出来ます。
1になるにつれて濃くなり、0に近づくにつれて薄くなります。
もし指定したい色のrgbaの値がわからない時は、「カラーコード変換ツール」を利用してみましょう。
まとめ
以上が、「背景色（background-color）だけを透過させる方法」でした。
是非背景色を透過させたい時に使ってみてください。
