web-dev-qa-db-ja.com

CSSの透明度にrgba(0、0、0、0)またはrgba(255、255、255、0)を使用する必要がありますか?

CSSの透過性にrgba(0, 0, 0, 0)またはrgba(255, 255, 255, 0)を使用する必要がありますか?

それぞれの長所と短所は何ですか?

33
Joe

rgba()関数の最後のパラメーターは、「alpha」または「opacity」パラメーターです。 0に設定すると、「完全に透過的」という意味になり、最初の3つのパラメーター(redgreen、およびblueチャネル)は重要ではありません。とにかく色を見ることができなくなります。

それを念頭に置いて、私はrgba(0, 0, 0, 0)を選択します:

  1. タイピングが少なく、
  2. cSSファイルに余分なバイトを入れないようにします。
  3. アルファ値が望ましくないものに変化すると、明らかな問題が発生します。

あなたはcouldrgbaモデルを完全に避け、代わりにtransparentキーワードを使用します。これは w3.orgによると 、「透明な黒」と同等であり、rgba(0, 0, 0, 0)に計算する必要があります。例えば:

h1 {
    background-color: transparent;
}

これにより、透明度を使用する意図が明らかな場合(RGBAに慣れていない場合)に、さらに数バイト節約できます。

CSS3では、色を受け入れるCSSプロパティにtransparentキーワードを使用できます。

62
Cᴏʀʏ

アルファ付きの色を保存するには、2つの方法があります。 1つ目は、各コンポーネントを現状のままで表示したとおりです。 2つ目は、事前に乗算されたalphaを使用することです。この場合、色の値は、0.0〜1.0の範囲に変換された後にalphaで乗算されます。これは compositing を簡単にするために行われます。通常、特定のエンジンでどの方法が実装されているかに気付いたり、気にしたりするべきではありませんが、たとえば、色の不透明度を上げようとした場合など、コーナーケースがあります。 rgba(0, 0, 0, 0)を使用すると、2つのアプローチの違いを見る可能性が低くなります。

9
Mark Ransom

Uがrgba(255,255,255、a)を使用する場合、わずかな違いがあります。「a」の値が0.0から1.0に増加すると、背景色はますます明るくなります。 rgba(0,0,0、a)を使用する場合と同様に、 'a'の値が0.0から1.0に増加すると、背景色はますます暗くなります。そうは言っても、(255,255,255,0)と(0,0,0,0)の両方が背景を透明にすることは明らかです。 (255,255,255,1)は背景を完全に白にしますが、(0,0,0,1)は背景を完全に黒にします。

3
Rahul Goyal