Colors and backgrounds

CSS特性によって，文書作成者は､要素の前景の色及び背景の色を指定できる。背景は色であっても，画像であってもよい。背景特性によって，文書作成者は背景画像に位置指定を行い，それを繰り返すことができ，さらに表示域に関してそれを固定するのがよいか，文書とともにスクロールするのがよいかを宣言できる。

14.1 前景の色('color' 特性)

'color'

値:	<color> \| inherit
適用対象:	すべての要素
継承:	する
パーセント値:	N/A
メディア:	視覚メディア
初期値:	利用者エージェントに依存する

この特性は，要素のテキスト内容の前景の色を記述する。赤を指定するにも, 次の異なる方法が存在する。

EM { color: red }              /* predefined color name */
EM { color: rgb(255,0,0) }     /* RGB range 0-255   */

14.2 背景

文書作成者は，要素の背景(すなわち，レンダリング面)を色又は画像のどちらかとして指定できる。ボックスモデルに関しては，"背景"は，内容領域及びパディング領域の背景を表す。境界色及びスタイルは，境界特性を用いて設定される。マージンは常に透明なので，親ボックスの背景は常に透けて見える。

背景特性は継承されないが，'background-color'の初期値が'transparent'であるため，デフォルトで親ボックスの背景は透けて見える。

ルート要素が生成するボックスの背景は，描画面全体を覆う。

しかし，HTML文書の場合, 文書作成者がHTML要素ではなくてBODY要素に関して背景を指定することを推奨する。利用者エージェントは, 次の優先規則を遵守して，背景を埋めることが望ましい。HTML要素に関する'background'特性の値が'transparent'ではない場合は，その値を使用し，それ以外の場合は，BODY要素に対する'background'特性の値を使用する。その結果の値が'transparent'となる場合は, レンダリングは定義されない。

これらの規則によって, 次のHTML文書の背景にある描画面は"マーブル"になる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Setting the canvas background</TITLE>
    <STYLE type="text/css">
       BODY { background: url("http://style.com/marble.png") }
    </STYLE>
  </HEAD>
  <BODY>
    <P>My background is marble.
  </BODY>
</HTML>

14.2.1 背景特性( 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position'及び'background')

'background-color'

値:	<color> \| transparent \| 継承
初期値:	transparent
適用対象:	すべての要素
継承:	しない
パーセント値:	N/A
メディア:	視覚メディア

この特性は，要素の背景の色を，<color>値，又は背景にある色を透けて見せるためのキーワード'transparent'のどちらかに設定する。

H1 { background-color: #F00 }

'background-image'

値:	<uri> \| none \| inherit
初期値:	none
適用対象:	すべての要素
継承:	しない
パーセント値:	N/A
メディア:	視覚メディア

この特性は, 要素の背景画像を設定する。背景画像を設定する場合，文書作成者は，画像が利用できないときに使用する背景の色も指定することが望ましい。画像が利用できるとき，背景の色の上に画像がレンダリングされる。したがって，画像の透明な部分では背景の色が透けて見える。

この特性の値は，画像を指定するための<uri>であるか, 画像を使用しない場合の'none'であるかのどちらかとする。

BODY { background-image: url("marble.gif") }
P { background-image: none }

'background-repeat'

値:	repeat \| repeat-x \| repeat-y \| no-repeat \| inherit
初期値:	repeat
適用対象:	すべての要素
継承:	しない
パーセント値:	N/A
メディア:	視覚メディア

背景画像が指定される場合, この特性は，画像が繰り返される(タイル状に敷き詰められる)かどうかを指定し，どのように繰り返されるかを指定する。ボックスの内容領域及びパディング領域がすべてタイル状に覆われる。値は, 次の意味をもつ。

BODY { 
  background: white url("pendant.gif");
  background-repeat: repeat-y;
  background-position: center;
}

A centered background image,
with copies repeated up and down the padding and content areas. [D]

背景画像のコピーを1枚中央に配置し，その他のコピーをその上下に配置して，要素の背景に上下に帯を形成する。

'background-attachment'

値:	scroll \| fixed \| inherit
初期値:	scroll
適用対象:	すべての要素
継承:	しない
パーセント値:	N/A
メディア:	視覚メディア

背景画像が指定される場合，この特性は，背景画像が表示域に関して固定されるのか('fixed')，文書とともにスクロールされるのか('scroll')を指定する。

画像が固定される場合でも, 画像が見えるのは，要素の背景又はパディングの領域の中に限られる。したがって，画像がタイル状に敷き詰め('background-repeat: repeat')られない場合には，見えなくなることがある。

次の例は，要素がスクロールされる場合に，表示域に"貼りついた"ままの無限の上下の帯を生成する。

BODY { 
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

利用者エージェントは'fixed'を'scroll'として処理してもよい。しかし, 文書作成者が画像を'fixed'をサポートするブラウザだけに提供する方法がないため，利用者エージェントは，少なくともHTML要素及びBODY要素については， 'fixed'を正確に解釈することを推奨する。詳細については適合性を参照のこと。

'background-position'

値:	[ [<percentage> \| <length> ]{1,2} \| [ [top \| center \| bottom] \|\| [left \| center \| right] ] ] \| inherit
初期値:	0% 0%
適用対象:	ブロックレベル要素及び置換要素
継承:	しない
パーセント値:	ボックス自体のサイズを参照
メディア:	視覚メディア

背景画像が指定されている場合, この特性はその初期位置を指定する。値は, 次の意味をもつ。

パーセント値又は長さの値が一つだけ提供される場合は，左右位置だけを設定し，上下位置は50%とする。二つの値が提供される場合は，左右位置を最初に設定する。'50% 2cm'など，長さの値とパーセントの値とを組み合わせてもよい。負の値も使用できる。キーワードを, パーセント値又は長さの値と組み合わせることはできない。可能な組合せのすべては, 前述のとおりとする。

BODY { background: url("banner.jpeg") right top }    /* 100%   0% */
BODY { background: url("banner.jpeg") top center }   /*  50%   0% */
BODY { background: url("banner.jpeg") center }       /*  50%  50% */
BODY { background: url("banner.jpeg") bottom }       /*  50% 100% */

背景画像が表示域内に固定される場合('background-attachment' 特性を参照)は, 画像は, 要素のパディング領域ではなく, 表示域に対して相対的に配置される。その例を次に示す。

BODY { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

この例では, (単独の)画像が表示域の右下隅に配置される。

'background'

値:	[<'background-color'> \|\| <'background-image'> \|\| <'background-repeat'> \|\| <'background-attachment'> \|\| <'background-position'>] \| inherit
初期値:	簡略記述特性については定義されない
適用対象:	すべての要素
継承:	しない
パーセント値:	'background-position'で使用できる
メディア:	視覚メディア

'background'特性は，まず各背景特性をすべてその初期値に設定し, それから宣言で提供される明示的な値を割り当てる。

次の例の最初の規則では，'background-color'に関する値だけが提供され，その他の各特性はその初期値に設定される。2番目の規則では, すべての各特性が指定されている。

BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }

14.3 ガンマ補正

ガンマの課題に関する情報については, PNG規定([PNG10])のGamma Tutorialを参照されたい。

ガンマ補正の計算では, CRTに表示するUAは理想的なCRTを想定してよく，ディザ化によって生じる見かけのガンマへの影響を無視してもい。すなわち，現プラットフォームで行わなければならない最小処理は, 次のとおり。

"ガンマを適用"とは，OSで処理される前に，三つのR, G及びBのそれぞれが R'=R^gamma, G'=G^gamma, B'=B^gammaに変換されなければならないことを意味する。

これは，ブラウザの起動の都度，256要素の照合表を次のとおり構築することによって，迅速に実行してもよい。

この処理によって，色属性ごとの面倒な数学的処理の実施を，1画素当りはるかに小さいものとすることができる。

14 色及び背景

14.1 前景の色('color' 特性)

14.2 背景

14.2.1 背景特性( 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position'及び'background')

14.3 ガンマ補正