CSS 要素の背景色を透明・半透明にする方法
要素の背景色を透明・半透明にする方法を紹介します。
例えば、以下のように緑背景にボタンを置いた場合を考えます。
<div style="background-color: green; padding: 10px;">
<input type="button" value="ボタン">
</div>透明
ボタンの背景色を透明にして、文字だけにしたい場合は以下のようにします。
<div style="background-color: green; padding: 10px;">
<input type="button" value="ボタン" style="background-color: transparent;">
</div>transparentを指定すると色は透明になり、背景の色がそのまま表示されることになります。
上記の例ではボーダーの色は透明ではないため、枠だけが表示されている状態になります。
背景色に限らず、ボーダー（border）や文字色（color）など、色を指定する部分にはどこでも指定することができます。
よく、background-color: #fff;のように背景色と同じ色を指定して、透明なように見せているデザインがありますが、透明という色がしっかりと定義されていますので、透明にしたい場合はtransparentを使用しましょう。
半透明
半透明にしたい場合は色の指定をrgbaに変更します。
以下の例は、ボタンの背景色を半透明（透過率５０％）の白に設定しています。
背景の緑色が半分透けて表示されていることが確認できます。
<div style="background-color: green; padding: 10px;">
<input type="button" value="ボタン" style="background-color: rgba(255, 255, 255, 0.5);">
</div>rgbaはrgba(r, g, b, a)のように指定します。第４パラメータがアルファ値（透明度）になります。
アルファ値を0にすると完全な透明になり、1にすると不透明になります。
普段は色の指定は#f1f1f1などの色コードで行うことが多いと思いますが、透過色を指定する場合はrgbaで指定する必要があります。
透過させるopacityというスタイルがありますが、こちらを指定すると、文字なども含めて要素自体が透明になってしまいます。
ボーダーや文字色や背景色などの色のみを透過させたい場合はopacityではなくrgbaで色を指定します。