HTML 半透明なテキスト色を指定したい（RGBA）

「rgba()」も、色を指定する方法のひとつです。rgb()に加えて、アルファ値（透明度）の設定ができるようになっています。rgba()は４つの値を指定する必要があり、前の３つの赤、緑、青の各色を0~255の10進数で指定します。さらに、4つ目の値で透明度を0~1.の少数で指定します。この値が0のとき完全に透明で見えなくなり、１のとき完全に不透明で、透明効果はなくなります。色指定の方法はいろいろありますが、色の透明度を指定できるのはrgba()と、hsla()だけです。

書式

color:rgba（赤,緑,青,透明度）;

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>サンプル</title>
    <style>
        .campaign{
            margin:0;
            height: 100px;
            background-color: #000;
            font-family: sans-serif;
            text-align: center;
            font-size: 60px;
            font-weight: bold;
            color: rgba(255,255,255,0.8);
        }
    </style>
</head>
<body>
    <p class="campaign">Happy New Year</p>
</body>
</html>

テキストの白の半透明で表示される

そのほかの色の指定方法

色指定の方法には、16進数、rgb()、rgba()のほかに、hsl()とhsla()があります。hsl()では「HSLカラーモデル」と呼ばれる、RGBとは異なる方式で色を数値化したものを使います。HSLカラーモデルは、H（Hue・色相）、S（Saturation・彩度）、L（Luminosity・明度）の３つの指標ですべての色を表現するもので、RGBに比べて、設定されている数値を見るだけでどんな色か想像しやすく、直感的とされています。hsla()は、hsl()に加えてアルファ値も設定できるようになっています。hsl()/hsla()は、JavaScriptでプログラム的に色を調整したいときなどによく使われます。

書式

color:hsl(色相,彩度,明度);
coloro:hsla(色相,彩度,明度,透明度);

色相：0~359
彩度：0~100
明度：0~100
透明度：0~1.0

カテゴリー:WEB