1. ホーム
  2. Web制作
  3. ヒントとコツ

rgbaはCSSの最も重要な部分であり、GBAの最も重要な部分でもあります。

2021-12-31 15:47:37

RGBAとは、色の値や透明度を設定できるCSSカラーです

ここでは、rgba()を使って透明度50%の白を表現しています。

p {
color: rgba(255, 255, 255, 0.5)です。
}

RGBAとは、RGBカラーモデルを拡張したものです。頭文字は赤、緑、青の3原色の頭文字をとったもので、アルファ値は色の透明度・不透明度を表しています。

RGBA構文

RGBA の色表現のフォーマットは次のとおりです。

rgba(red, green, blue, alpha)

最初の3つの値(red, green, blue)は、0から255の整数、または0%から100%のパーセンテージの範囲です。これらの値は、予想される色に含まれる赤、緑、青の原色の量を表します。
純粋な赤を設定したい場合は、赤のパラメータをフル、つまり255に設定し、緑、青を0に設定するだけです。

background-color: rgba(255, 0, 0, 1)です。

結果

また、パーセンテージを使うこともできます。

background-color: rgba(100%, 0%, 0%, 1)。

結果

4番目の値、アルファは、色の透明度/不透明度を設定し、範囲は0.0から1.0までです

次の例では、黄色を透明度50%で設定しています。

color: rgba(255, 242, 0, 0.5)。

css translucentはfirefox、ie、chromeと互換性があり、現在ではブラウザのバージョンが上がっています。あなたのプロジェクトで安全に使用することができます。