WEBフロントエンド第九課——div背景

1.div+cssレイアウト
とくせい
①ドキュメント内のパーティションまたはセクションを定義できます(division/section)
②文書を独立した、異なる部分に分割することができ、厳格な組織ツールとして使用することができる
③はブロックレベルの要素で、その内容は自動的に新しい行を開始します.
④一般的にidまたはclassタグでCSSと併用
よく使うCSS属性:
width:数値、height:数値、background-color:色、float-left(divが1行を占めない)
2.background-color背景色
デフォルトはtransparent(透過性)
背景画像と背景色を同時に定義すると、背景画像は背景色の上に上書きされます.
色の取り出し方法:
①red、blueなどのキーワード
②16進数、#00000、#cccc、#ff 0000など
　　　　③ rgb(0,0,0)
④rgba(0,0,0,.n)、nは0~1、透明度
3.background-image背景画像
デフォルトはnone(画像なし)
エレメントバックグラウンドは、エレメントのすべての寸法を占めます.内側の余白と枠線が含まれますが、外側の余白は含まれません.
urlで絶対パスまたは相対パスを使用してピクチャを指定し、background-image:url(");
4.background-repeat背景画像が重複しているか
共通のプロパティ:
repeat、デフォルト値、background-imageデフォルト水平方向と垂直方向に並べて表示
repeat-x、背景画像が水平方向に繰り返されます
repeat-y、背景画像は垂直方向に繰り返します
No-repeat、背景画像は1回のみ表示されます
構文の例

body{
        background-image: url("");
        background-repeat: no-repeat;
        }

5.background-size背景画像サイズ
lengthは、背景画像の幅と高さを設定し、1番目の値は幅を設定し、2番目の値は高さを設定し、1つの値だけを設定すると、2番目の値は「auto」に設定されます.
percentageでは、親要素のパーセントで画像の幅と高さを設定します.
coverは、背景画像を十分に大きく拡張して、背景画像が背景領域を完全にカバーしているため、背景画像の一部が背景領域に完全に表示されない可能性があります.
containは、画像を最大サイズに拡張して、幅と高さがコンテンツ領域に完全に適応し、背景領域の一部が完全にカバーできない可能性があります.
6.background-position背景画像位置
positionは外部コンテナに対してページ全体ではない
属性値の書き方:
①方位キーワード定義を使用し、1番目の値は水平方向(left、center、right)、2番目の値は垂直方向(top、center、bottom)を定義する
②パーセンテージ定義を使用し、1番目の値は水平方向、2番目の値は垂直方向を定義し、左上隅は「0%」、右下隅は「100%100%」
③具体的な数字で定義し、1番目の値は水平方向、2番目の値は垂直方向、左上隅は「0 px 0 px」
属性の特徴:
①positionのデフォルト値は、領域の左上隅、すなわち0点座標
②上記の3つの方法で、1つの値のみが定義されている場合は、もう1つの値が中央(centerまたは50%)になります.
③以上の3つの方法を組み合わせて使用できます
7.background-attachment背景画像がコンテンツとともにスクロールするかどうか
属性値:
①scroll、デフォルト、ページの残りの部分のスクロールに従って移動
②fixed、ページスクロール時、背景画像が動かない

body{
     background-image: url("");
     background-attachment: scroll;
     }

8.background略記
backgroundスケッチプロパティは、宣言ですべてのバックグラウンドプロパティを設定できます.
次のようにプロパティを設定できます.
　　background-color
　　background-image
　　background-repeat
　　background-attachment
　　background-position
　　background-size
いずれかの値を設定しなくても問題が発生しない場合は、自動的にデフォルト値を取ります.
属性値を書く場合は、厳密な順序の要求はありませんので、上記リストの順序で順番に設定することをお勧めします