CSS 配置要素background_html/css_WEB-ITnose

CSS でも同様で、各要素ボックスは 2 つのレイヤーで構成されていると考えることができます。要素の前景レイヤーには、コンテンツ (テキストや画像など) と境界線が含まれます。要素の背景レイヤーは、(background-color 属性を使用して) 単色で塗りつぶすことも、任意の数の背景画像を含めることもできます。背景画像は背景色の上にオーバーレイされます。

CSS背景プロパティ

background-color

background-image

background-repeat

background-position

background-size

background-attachment

background (省略形属性)

背景クリップ、background-origin、background-break (まだ広くサポートされていません)

Background-color

background-color は、要素の色を設定できる背景属性の中で最も単純です。次に、要素は設定された色で背景レイヤーを塗りつぶします

背景画像

background-image:url(画像パス/画像ファイル名)

背景の繰り返し

背景の繰り返し方法を制御しますbackground-repeat 属性には 4 つの値があります。デフォルト値は繰り返しです。 repeat-x、repeat-y、no-repeat

背景添付ファイル

background-attachment 属性は、スクロール要素内の背景画像が要素のスクロールに応じて移動するかどうかを制御します。この属性のデフォルト値はスクロールで、背景画像が要素とともに移動することを意味します。この値を固定に変更すると、要素がスクロールしても背景画像は移動しなくなります。

background-attachment:fixed は、ページのスクロール時に透かしが移動しないように、body 要素の中央に軽い透かしを追加するために最も一般的に使用されます。

略語背景属性

body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

宣言内で属性の値が省略されている場合（例えば、no-repeatと書かれていない場合）、対応する属性のデフォルト値（repeat）が使用されます。

複数の背景画像

p {    height:150px;    width:348px;    border:2px solid #aaa;    margin:20px auto;    font:24px/150px helvetica, arial, sansserif;    text-align:center;    background:        url(images/turq_spiral.png) 30px -10px no-repeat,        url(images/pink_spiral.png) 145px 0px no-repeat,        url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;}

CSSでは、各画像の位置と繰り返しの設定値が明確に見えるように、各画像の宣言をカンマで区切って別の行に配置しました。画像の読み込みに失敗したときに要素の背景がデフォルトの透明状態になるのを防ぐために、背景色 (太字の値) も最後のステートメントに追加されます。コード内で最初にリストされている画像が上、または前景近くに表示されることに注意してください。

背景グラデーション