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)を使用する必要がありますか？

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

csscss3colors
33
Joe

rgba()関数の最後のパラメーターは、「alpha」または「opacity」パラメーターです。 0に設定すると、「完全に透過的」という意味になり、最初の3つのパラメーター（red、green、および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