仕様書

• [2] CSS Color Module Level 3 (2011-06-07 21:54:38 +09:00 版) <http://www.w3.org/TR/2011/REC-css3-color-20110607/#rgba-color>

rgba() 関数

[5] rgba() 関数は、

• [6] rgba(
• [7] 3つの整数値または3つの百分率値を読点で区切ったもの
• [8] 読点
• [9] <alphavalue>
• [10] )

... で構成されます。整数値や百分率値や <alphavalue> の前後には空白を入れることができます。 >>2

[12] 最初の3つの数値は RGB を表すものであり、 rgb() 関数と同じです。

[13] 最後の数値 (<alphavalue>) はα値、 つまり色の不透明度 (opacity) を表します。 >>2

色空間

[14] 装置の色域に応じたくりぬきを rgb() 関数同様に行わなければなりません >>2。

[15] <alphavalue> についても 0 から 1 までの値へのくりぬきが行われます。

構文解析

[3] Firefox 3 では、 a の値が 1 以上なら構文解析時に rgb() に置き換えられ、 0 以下なら構文解析時に 0 に置き換えられます。

[22] RGBA値に対応していない利用者エージェントは CSS の先方互換構文解析規則に従って未対応の値であるとして扱うべきであって、 α値だけを無視してはなりません。 >>2

例

• [16] rgba(255,0,0,1)
• [17] rgba(100%,0%,0%,1)

[18] <alphavalue> の 1 は完全に不透明であることを表しており、 従ってこれらは rgb(255,0,0) や rgb(100%,0%,0%) と等価であり、いずれも不透明な赤を表しています。 >>2

• [20] rgba(0,0,255,0.5)

• [21] rgba(100%, 50%, 0%, 0.1)

関連

[19] α値を含まない場合は #rrggbb のような十六進数表現が使えますが、 α値付きの場合はそのような表現はありません。 CSS 以外では #rrggbbaa という表記方法が行われることもありますが、 CSS では認められていません。

メモ

[1] Opacity, RGBA and compromise - CSS3 . Info (2007-06-04 19:45:58 +09:00 版) <http://www.css3.info/opacity_rgba_and_compromise/> (名無しさん 2007-06-04 10:47:14 +00:00)