css-background

CSSでは、背景として純色を適用したり、背景画像を使用してかなり複雑な効果を作成したりすることができます.
CSSのこの方面の能力はHTMLの上ではるかに高いです.

背景色

background-colorプロパティを使用して、要素の背景色を設定できます.このプロパティは、任意の合法的な色値を受け入れます.
この規則では、要素の背景をグレーに設定します.

p {background-color: gray;}

要素内のテキストから背景色を少しだけ外側に伸ばす場合は、内側の余白を増やすだけです.

p {background-color: gray; padding: 20px;}

bodyからemやaなどの行内要素まで、すべての要素にバックグラウンド色を設定できます.
background-colorは継承できません.デフォルトはtransparentです.Transparentには「透明」という意味があります.つまり、1つの要素が背景色を指定していない場合、背景は透明であり、祖先の要素の背景が表示されます.

背景画像

画像を背景に入れるにはbackground-imageプロパティを使用します.background-imageプロパティのデフォルト値はnoneで、背景に画像が配置されていないことを示します.
背景画像を設定する必要がある場合は、このプロパティのURL値を設定する必要があります.

body {background-image: url(/i/eg_bg_04.gif);}

ほとんどのバックグラウンドはbody要素に適用されますが、これに限られません.
次の例では、ドキュメントの他の部分に背景を適用せずに、段落に背景を適用します.

p.flower {background-image: url(/i/eg_bg_03.gif);}

行の要素に背景画像を設定することもできます.次の例では、リンクに背景画像を設定します.

a.radio {background-image: url(/i/eg_bg_07.gif);}

理論的にはtextareasやselectなどの置換要素の背景に画像を適用することもできるが,すべてのユーザエージェントがこのような状況をうまく処理できるわけではない.
また、background-imageも継承できません.実際には、すべてのバックグラウンドプロパティは継承できません.

バックグラウンドの繰り返し

ページに背景画像を並べ替える必要がある場合はbackground-repeatプロパティを使用します.
プロパティ値repeatは、従来の背景画像の一般的なやり方と同様に、画像を水平垂直方向に平らにします.repeat−xおよびrepeat−yはそれぞれ、画像が水平または垂直方向にのみ繰り返され、no−repeatは、画像が任意の方向に平らになることを許さない.
既定では、背景画像は要素の左上隅から始まります.次の例を見てください.

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

上記の例の効果を確認する必要がある場合は、自分で試してみてください.

背景の位置付け

background-positionプロパティを使用して、背景における画像の位置を変更できます.
次の例では、body要素の背景画像を中央に配置します.

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

background-positionプロパティに値を指定するには、多くの方法があります.まず、top、bottom、left、right、centerというキーワードを使用できます.通常、これらのキーワードはペアで表示されますが、必ずしもそうではありません.また、100 pxや5 cmなどの長さ値を用いてもよく、最後にパーセンテージ値を用いてもよい.異なるタイプの値は背景画像の配置に少し違います.

キーワード

画像配置キーワードは、名前が示すように最も理解しやすい.たとえば、top rightは、要素内の余白領域の右上隅に画像を配置します.
仕様に従って、位置キーワードは、2つのキーワード-1つの水平方向、もう1つの垂直方向を超えないことを保証する限り、任意の順序で表示できます.
1つのキーワードしか表示されない場合は、もう1つのキーワードがcenterであるとみなされます.
したがって、各段落の中央に画像を表示するには、次のように宣言します.

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

次は、等価な場所キーです.
単一キー
同等のキーワード
center
center center
top
トップセンターまたはセンタートップ
bottom
义齿
right
right centerまたはcenter right
left
left centerまたはcenter left

パーセント

パーセンテージ値の表現はもっと複雑です.画像を要素の中でパーセンテージ値で中央に配置したいとします.これは簡単です.

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

これにより、画像が適切に配置され、その中心が要素の中心に位置合わせされます.すなわち、パーセンテージ値は要素と画像に同時に適用される.すなわち、画像において50%50%と記述されている点(中心点)は、要素において50%50%と記述されている点(中心点)と位置合わせされる.
画像が0%にある場合、左上隅はエレメント内の余白領域の左上隅に配置されます.画像位置が100%であれば、画像の右下隅を右から右下隅に置きます.
したがって、水平方向2/3、垂直方向1/3に画像を配置したい場合は、次のように宣言できます.

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

パーセンテージ値が1つしか指定されていない場合、この値は水平値として使用され、垂直値は50%と仮定されます.この点はキーワードと似ています.
background-positionのデフォルト値は0%で、機能的にはtop leftに相当します.これは、異なる位置値を設定しない限り、背景画像が要素内の余白領域の左上隅から常に平らになる理由を説明します.

長さの値

長さの値は、要素内の余白領域の左上隅のオフセットを説明します.オフセットポイントは画像の左上隅です.
例えば、50 px 100 pxに設定すると、画像の左上隅は、要素内の余白領域の左上隅から右50画素、下100画素の位置になります.

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

この点は、オフセットが左上隅から左上隅までしかないため、パーセンテージ値とは異なります.すなわち、画像の左上隅はbackground-position宣言で指定された点に位置合わせされる.

背景の関連付け

ドキュメントが長い場合は、ドキュメントが下にスクロールされると、背景画像もスクロールされます.ドキュメントが画像を超える位置にスクロールすると、画像は消えます.
このスクロールはbackground-attachmentプロパティで防止できます.このプロパティを使用すると、表示領域に対して画像が固定されていることを宣言できます.したがって、スクロールの影響は受けません.

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

background-attachmentプロパティのデフォルト値はscrollです.つまり、デフォルトでは、背景がドキュメントとともにスクロールされます.
W 3 CSCHOLに転載