RGBAによる透明度

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 28/76。

CSSにおいて、RGBAカラーは、色の不透明度を指定するためのアルファチャンネルを含むRGBカラーの拡張です。RGBAはRed（赤）、Green（緑）、Blue（青）、Alpha（アルファ）の略です。アルファパラメータは0.0（完全に透明）から1.0（完全に不透明）の間の数値であり、さまざまな透明度の色を作成することができます。

CSSでRGBAカラーを使用するための基本構文は次のとおりです：

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

例えば：

p {
    color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
    background-color: rgba(0, 255, 0, 0.3); /* 半透明の緑 */
}

h1 {
    color: rgba(0, 0, 255, 0.7); /* 半透明の青 */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒いオーバーレイ */
}

チャレンジ

簡単

<h3>見出しと<p>段落が含まれるHTMLドキュメントが与えられています。あなたのタスクは、background-colorプロパティとrgba()関数を使用して、これらの要素に透明度を設定するスタイルを適用することです。以下の手順に従ってください：

<h3>要素をターゲットとするCSSルールを記述します。rgba(0, 0, 255, 0.5)（50%の透明度）を使用して、背景色を青に設定します。
<p>要素をターゲットとするCSSルールを記述します。rgba(0, 128, 0, 0.3)（30%の透明度）を使用して、背景色を緑に設定します。

チートシート

RGBAカラーは、不透明度のためのアルファチャンネルをRGBカラーに追加したものです。アルファパラメータは0.0（完全に透明）から1.0（完全に不透明）の範囲で指定します。

基本的な構文：

selector {
    color: rgba(red, green, blue, alpha);
    background-color: rgba(red, green, blue, alpha);
}

例：

p {
    color: rgba(255, 0, 0, 0.5); /* 半透明の赤 */
    background-color: rgba(0, 255, 0, 0.3); /* 半透明の緑 */
}

.overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 半透明の黒いオーバーレイ */
}

自分で試してみよう

<html>
<head>
    <title>Transparency with RGBA</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h3>Did You Know?</h3>
    <p>The first computer programmer was Ada Lovelace in the 1800s!</p>
</body>
</html>