【CSS】rgba()でテキストを半透明で表示させる

colorプロパティのrgba()でテキストを半透明化させる方法
rgba()の書き方

colorプロパティのrgba()でテキストを半透明化させる方法

colorプロパティのrgb(赤,緑,青)は、0～255の10進数を記述してテキストの色を指定することができました。
rgbaでは、赤・緑・青だけではなくテキストの透明度も数値で指定することが可能です。
透明度は「0～1.0」の小数で表し、0に近いほど透明度が増し、0だと完全に透明になります。

rgba()の書き方

color: rgba(赤,緑,青,透明度);

わかりやすく背景画像も使用した例を示したいと思います。
背景画像の上に、赤文字で「テストメッセージ」というテキストを表示させ、半透明にします。
透明度は「0.4」で指定します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css" type="text/css">
    <title>テストページ</title>
</head>
<body>
    <div class="test">
        テストメッセージ
    </div>
</body>
</html>

@charset "utf-8";

.test {
    color: rgba(255,0,0,0.4);
    width: 400px;
    height: 152px;
    font-size: 50px;
    font-family: sans-serif;
    padding: 5px;
    background: url(img/bg.png) no-repeat;
}