zukucode
主にWEB関連の情報を技術メモとして発信しています。

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に変更します。

以下の例は、ボタンの背景色を半透明(透過率50%)の白に設定しています。

背景の緑色が半分透けて表示されていることが確認できます。

<div style="background-color: green; padding: 10px;">
    <input type="button" value="ボタン" style="background-color: rgba(255, 255, 255, 0.5);">
</div>

rgbargba(r, g, b, a)のように指定します。第4パラメータがアルファ値(透明度)になります。

アルファ値を0にすると完全な透明になり、1にすると不透明になります。

普段は色の指定は#f1f1f1などの色コードで行うことが多いと思いますが、透過色を指定する場合はrgbaで指定する必要があります。

透過させるopacityというスタイルがありますが、こちらを指定すると、文字なども含めて要素自体が透明になってしまいます。

ボーダーや文字色や背景色などの色のみを透過させたい場合はopacityではなくrgbaで色を指定します。



関連記事