CSSバックグラウンドbackgroundプロパティの古典的な構成について

background
 

background-color: transparent;

background-image: url("/assets/images/phonetitle1.gif");

background-repeat: repeat;

background-attachment: scroll;

background-position: 0% 0%;

background-clip: border-box;

background-origin: padding-box;

background-size: auto auto;

1、background-color: transparent;
要素の背景色を設定
アトリビュートは、要素に純粋な色を設定します.この色は、要素の内容、内側の余白、および枠線領域を塗りつぶし、要素の枠線の外側の境界に拡張します(ただし、外側の余白は含まれません).破線の枠線のような透明な部分がある場合、これらの透明な部分を通して背景色が表示されます.
ほとんどの場合、transparentを使用する必要はありません.ただし、エレメントにバックグラウンドカラーを持たないで、ブラウザのカラー設定がデザインに影響を与えないようにするには、transparent値を設定する必要があります.
2、background-image: url("/assets/images/phonetitle1.gif");
 
3、background-repeat: repeat;
 
4、background-attachment: scroll;
プロパティは、背景画像が固定されているか、ページの残りの部分がスクロールされているかを設定します.
scroll
既定値.背景画像は、ページの残りの部分がスクロールするにつれて移動します.
fixed
ページの残りの部分がスクロールされると、背景画像は移動しません.
inherit
親要素からbackground-attachmentプロパティの設定を継承することを指定します.
 
 
 
5、background-position: 0% 0%;
背景画像の開始位置を設定します.

top left

top center

top right

center left

center center

center right

bottom left

bottom center

bottom right

キーワードを1つだけ指定すると、2番目の値は「center」になります.既定値:0%です.
x% y%
1番目の値は水平位置、2番目の値は垂直位置です.左上は0%です.右下は100%です.1つの値のみを指定すると、もう1つの値は50%になります.
xpos ypos
1番目の値は水平位置、2番目の値は垂直位置です.左上隅は0 0です.単位は、画素(0 px 0 px)または他のCSS単位である.1つの値のみを指定すると、もう1つの値は50%になります.%とposition値を混合して使用できます.
 
6、background-clip: border-box;
背景の描画領域.
背景は枠線ボックスに切り取られます.border-box
背景は内側の余白ボックスに切り取られます.padding-box
背景はコンテンツボックスに切り取られます.content-box
7、background-origin: padding-box;
　　
8、background-size: auto auto;
背景画像のサイズを指定します.

　　　　　　　　　　　　　　　　　　　　　　background-size: length|percentage|cover|contain;

length
背景画像の高さと幅を設定します.1番目の値は幅、2番目の値は高さを設定します.1つの値のみを設定すると、2番目の値はautoに設定されます.
percentage
親要素の割合で背景画像の幅と高さを設定します.1番目の値は幅、2番目の値は高さを設定します.1つの値のみを設定すると、2番目の値はautoに設定されます.
cover
背景画像を十分に大きく拡張して、背景画像が背景領域を完全に覆うようにします.背景画像の一部が背景位置決め領域に表示されない場合があります.
contain
画像画像画像を最大サイズに拡張し、幅と高さがコンテンツ領域に完全に適応するようにします.