web-dev-qa-db-ja.com

「不透明度」以外のRGBとRGBAの違いは何ですか

orange、blue、aquamarineなどを宣言することで、CSSで標準色を使用する以上に移動し、rgb()を使用していますしたがって、それぞれ同じ色の場合、rgb(255,165,0)、rgb(0,0,255)およびrgb(127,255,212)（ST3の ColorHighlighter パッケージのおかげ）。

bootstrap _.btn_）のグラデーションを変更すると、rgba()に出会いました。aはalphaの略であることが簡単な研究で説明されています。また、 Catmull および Smith に起因する整数の数学の束があります。また、アルファチャネルが「アルファ合成」に使用されていることも簡単にわかります。 「不透明度」として関連付けられます。

  • 不透明度以外に2つの違いはありますか？
  • なぜRGBAを使用するのが慣習ではないのか（これにつまずいたのでこれを仮定している）
  • Webでrgba（）を使用する場合に知っておくべき他の制限はありますか？
  • 色のショートカットの横に不透明度を宣言するショートカットはありますか？ （つまり_color: salmon:.5;_）
  • Web開発者の観点から、異なるマシンのARGB、RGBA、BGRAバイト順序の違いを心配する必要がありますか [〜＃〜] info [〜＃〜] ？
  • その他の重要な情報は？
cssrgbargbrbga
15
chris Frisina

RGBは、赤、緑、青のデータを含む3チャンネル形式です。 RGBAは、赤、緑、青、およびアルファのデータを含む4チャネル形式です。

色を透明/不透明（または部分的に透明、半透明）にする以外に、アルファチャネルを使用することはできません。

CSSでは、rgb（）が同じレベルのサポートを受ける前に、rgb（）が数年間幅広いブラウザをサポートしていました。これは、rgba（）よりも多くのrgb（）をCSSで見つける理由の1つです。もう1つの理由は、半透明性は一般的にどこでも使用するものではないということです。

RGB値は16ビットに詰められており、青と赤に5ビット、緑に6ビットがあります（目が緑の濃淡を見分けるため、緑のビットが増えます）。また、RGBA値が16ビットにパックされており、各色に5ビット、アルファに1ビットが含まれている場合があります。 1ビットでは、色を完全に透明にするか、まったく透明にしないことができます。

通常、今日では、RGBとRGBAは32ビット値にパックされており、各色に8ビット、アルファに8ビット（またはRGBの場合は空白）があります。

CSSでは、設計者は赤、緑、青に0〜255（8ビット値の範囲）の値を使用することにしましたが、アルファチャネルには0.0〜1.0の値を使用します。色の実際のバイト形式は、Web開発者とは無関係です。

私の経験では、rgb（）もrgba（）もCSSではあまり使用されていません。六角形の色ははるかに支配的であり、さらに数年前にそれらに先行しました。

HSLは実際には色を扱うためのはるかに優れた形式であり、CSS（IE9 +、Firefox、Chrome、Safari、およびOpera 10+。）でサポートされています。

http://www.w3schools.com/cssref/css_colors_legal.asp

26
Rich Remer

[〜＃〜] rgb [〜＃〜]は標準のrgb色であり、すでに理解している。

RGBaは標準のRGB色ですが、アルファ/不透明度もあります。

それ以外に違いはありませんが、色は同じようにコード化されます。

これと他のCSS3カラースタイルの使用に関する問題は、常にサポートされているわけではないことです。 リンク これは、どのバージョンのブラウザーがそれをサポートしているかを示しています。

alphaを[〜＃〜] css [〜＃〜]で宣言すると、このようになりますrgba （0、0、0、.3）アルファが10進数または1から。 1は不透明で、0は完全に透明です。

2
NathanZNeitman

rgbは標準のrgb値です（赤、緑、青）

rgbaは標準のrgb値です（赤、緑、青+アルファ（不透明度））

カラーバリエーションはありません。 RGBAはcss3カラープロパティです。

古いブラウザのサポートは制限されている可能性があるため、次のような代替色を使用することをお勧めします。

CSS：

div {
    background-color: rgb(200, 54, 54); /* The Fallback */
    background-color: rgba(200, 54, 54, 0.5); 
}
1
remixdesign