rGBAで色を指定

color:○;やbackground:○;など、さまざまなスタイル指定で色を指定することがあります。
この教材では、rgbで指定していきましたが、今回は、RGBaで透明度も指定してみましょう。

RGBaは、red、green、blue、にalpha(透明度)が加わったものです。

半透明の文字を作成

以下のようにcolorをrgbaで指定し、透明度50%の文字色にします。

index.html
<p class="alpha-tx">これは半透明の文字です</p>
style.css
.alpha-tx{
    color:rgba(0, 0, 0, 0.5);
}

↑見易さのために半角スペースを入れていますが、無くても構いません。

rgb(○,×,△,□);○:red、×:green、△:blue、□:alpha
赤緑青はこれまで通り~%の形で書いていいですが、最後のalphaは、0.0~1の範囲で記述します。
つまり、50%なら0.5、完全な透明は0、透明でないなら1と書きます。
見本ページを新しいタブで開く

文字に背景の白が透けてグレーに見えますね。

PAGE TOP