“CSS Backgrounds and Borders Module”

概要

“CSS Backgrounds and Borders Module”は境界線や背景についての機能について定義している仕様書です。

仕様書

定義されているプロパティ

background-color
background-image
background-repeat
background-attachment
background-position
background-clip
background-origin
background-size
background
border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
border-top-style
border-right-style
border-bottom-style
border-left-style
border-style
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-top
border-right
border-bottom
border-left
borderp
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-radius
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
border-image
box-shadow

背景

それぞれのボックスは背景があります。既定では完全に透明で、背景色で塗りつぶしたり、1個以上の画像で覆ったりすることができます。背景画像がある場合、背景色はその下に塗られます。

背景は子孫ボックスへは継承されませんが、子孫ボックスの背景が透明な場合は子孫要素も同じ背景が塗られているように見えます。

複数の背景画像

ボックスの背景は複数のレイヤーとして重ね合わせることができます。レイヤーの数は“background-image”プロパティのコンマ(“,”)区切りの背景画像を指定する値の数で決まります。

div {

background-image: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-repeat: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-attachment: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-position: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-clip: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-origin: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-size: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;

}

背景画像の大きさや配置位置、配置方法は他の背景を指定するプロパティのコンマ(“,”)区切りの値のリストで指定され、それぞれのプロパティの値は記述された順に“background-image”プロパティで指定された背景画像に対応します。記述された値の数が不足する場合には値のリストを繰り返すことで不足する値が補われます。

“background-image”プロパティで指定された背景画像のうち最初に記述されたものが最も手前に描画され、2番目以降に記述されたものはその下に順に重ねられて描画されます。

特殊な要素の背景

文書が描画される領域である“キャンバス(Canvas)”はどの要素にも関連付けられていないので、キャンバスの背景にはルート要素、もしくはHTMLの場合は“body”要素のスタイルが使用されます。もしその要素の“display”プロパティの値が“hidden”である場合は、キャンバスは透明です。

キャンバスの背景が不透明でない場合はキャンバスの下にある“キャンバス・サーフェス(Canvas Surface)”が透けて表示されます。キャンバス・サーフェスの色はユーザー・エージェントによって異なりますが通常は白色です。

ルート要素の背景はキャンバスの背景になり、背景の描画領域はキャンバス全体に広がります。ただし、背景画像の大きさや配置位置はキャンバス全体ではなくルート要素が基準となります。キャンバスに塗られた背景はルート要素にもう一度塗られることはなく、ルート要素の背景の使用値は“transparent”になります。

“body”要素の背景

HTML文書、もしくはXHTML文書でルート要素である“html”要素の“background-image”プロパティの計算値が“none”であり、“background-color”プロパティの計算値が“transparent”である場合、その子要素である最初の“body”要素のこれらのプロパティの計算値が“html”要素のものとして扱われ、キャンバスの背景に反映されます。

“::first-line”擬似要素の背景

“::first-line”擬似要素は背景を描画する時にはインライン・レベルの要素であるかのように扱われます。

プロパティ