CSSでのRGBとRGBaの色（何、なぜ、どのように）

CSSのRGBとRGBaの色の違いと、RGBaを使用してWebサイト用の美しく注目を集めるUIコンポーネントを作成する方法について説明します。

RGB およびRGBa 16進コードの色の値（#282828など）を使用する代わりに、CSSで使用される2つのカラーモデルです。 ）。

RGBとRGBaの違いは何ですか？

• RGBは赤、緑、青の略です
• RGBaは、赤、緑、青、およびアルファの略です。

アルファは透明性です チャンネル。色の透明度を制御するために使用できます。

混乱していても心配しないでください。すぐに意味がわかります。

RGBとRGBaを使用するために、CSSは2つのカラー関数rgb()を提供します およびrgba() 。

どちらの関数も、赤、緑、青のカラースケールで0〜255の範囲の背景色を追加するために使用されます。

ただし、rgb() 単色の背景色を追加するためにのみ使用されます：

{   
    /* 100% solid green */
    background-color: rgb(0, 255, 0); 
}

一方、RGBaは、アルファチャネルを介して透明度を追加できるため、RGBよりもはるかに柔軟性があります。

{   
    /* 50% green transparency */
    background-color: rgb(0, 255, 0, 0.5); 
}

背景色に透明度を追加すると便利なのはなぜですか？

たとえば、次のように、ウェブサイト用に注目を集めるUIカードをデザインするとします。

上記のUIカードには次のものがあります：

• サムネイル画像
• オーバーレイ
• 上部にいくつかのテキストがあります。

rgba()を使用しました アルファチャネルを使用して、背景画像をテキストと比較してどの程度表示するかを制御する関数。 UIカードオーバーレイに50％の黒の透明度を選択しました：

.card-overlay {
    background-color: rgba(0, 0, 0, 0.5); /* 0.5 = 50% */
}

なぜ50％の透明度を使用したのですか？

40％または60％だったかもしれません。また、2つの異なるレベルの透明度を持つ線形グラデーションを使用することもできます。外観の種類によって異なります。

高アルファチャネルと低アルファチャネルの透明度：

• アルファチャネル値を低くします（0.1など） ）、透明度が高くなり、背景画像が見やすくなります。
• アルファチャネル値が高い（0.9など） ）、透明度が低く、背景画像が見えにくくなります。

以下の比較でわかるように、アルファチャネル値はプレゼンテーションの読みやすさと雰囲気に影響を与えます。

オーバーレイを明るくしたり暗くしたりしないでください。

コンテンツをユーザーにどのように表現したいかに合ったスイートスポットを見つけることがすべてです。

サンプルコード

以下は、UIカードの例のすべてのHTMLとCSSです。

HTML

    <div class="card">
      <div class="card-overlay"></div>
      <img class="card-thumbnail" src="/images/the-north-sea-denmark.png" />
      <div class="card-text">
        <h3 class="card-title">The North Sea of Denmark</h3>
        <p class="card-description">
          Explore the beautiful & dynamic North Sea of Denmark — where every day
          is a new experience.
        </p>
      </div>
    </div>

CSS

.card {
    position: relative;
    height: 400px;
    width: 400px;
}

.card-thumbnail {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
}

.card-text {
    color: white;
    position: absolute;
    width: 80%;
    max-width: 300px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.card-title {
    font-size: 1.45rem;
}
.card-description {
    font-size: 1.15rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

.card-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

独自のUIカードの参照または開始点として使用してください。