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と書きます。 |
---|
文字に背景の白が透けてグレーに見えますね。