CSSの透明度は、rgba(0, 0, 0, 0)とrgba(255, 255, 255, 0)のどちらを使うべきでしょうか?
rgba(0, 0, 0, 0)
rgba(255, 255, 255, 0)
また、それぞれの長所と短所は何ですか?
関数 rgba() の最後のパラメータは、"alpha"または"opacity"パラメータです。これを0に設定すると、完全に透明という意味になり、最初の3つのパラメータ(red、green、blueの各チャンネル)は、いずれにしても色を見ることができないので、重要ではありません。
rgba()
0
red
green
blue
この点を考慮して、私はrgba(0, 0, 0, 0)を選択します。
これは、w3.orgによると、"transparent black"と同等であり、rgba(0, 0, 0, 0)と計算する必要があります。例えば、以下のようになります。
h1 { background-color: transparent; }
これにより、透明度を使用する意図が明らかであるにもかかわらず、さらに数バイトを節約することができます(RGBAに慣れていない人のために)。
CSS3では、色を指定できるすべてのCSSプロパティに対して、transparentキーワードを使用できます。
transparent
アルファを使った色の保存方法は2種類あります。1つ目は、見たままの状態で、各構成要素がそのままの状態です。これは、合成を容易にするためのものです。通常、特定のエンジンでどちらが実装されているかを気にする必要はありませんが、色の不透明度を上げようとした場合など、気になるコーナーケースがあります。rgba(0, 0, 0, 0)`を使うと、2つのアプローチの違いがわかりにくくなります。
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)は背景を完全に黒にします。
関数
rgba()
の最後のパラメータは、"alpha"または"opacity"パラメータです。これを0
に設定すると、完全に透明という意味になり、最初の3つのパラメータ(red
、green
、blue
の各チャンネル)は、いずれにしても色を見ることができないので、重要ではありません。この点を考慮して、私は
rgba(0, 0, 0, 0)
を選択します。これは、w3.orgによると、"transparent black"と同等であり、
rgba(0, 0, 0, 0)
と計算する必要があります。例えば、以下のようになります。これにより、透明度を使用する意図が明らかであるにもかかわらず、さらに数バイトを節約することができます(RGBAに慣れていない人のために)。
CSS3では、色を指定できるすべてのCSSプロパティに対して、
transparent
キーワードを使用できます。アルファを使った色の保存方法は2種類あります。1つ目は、見たままの状態で、各構成要素がそのままの状態です。これは、合成を容易にするためのものです。通常、特定のエンジンでどちらが実装されているかを気にする必要はありませんが、色の不透明度を上げようとした場合など、気になるコーナーケースがあります。rgba(0, 0, 0, 0)`を使うと、2つのアプローチの違いがわかりにくくなります。
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)は背景を完全に黒にします。