background是復合屬性，它可以分解為8個屬性，其中5個屬于CSS，另外3個屬于CSS3
一、CSS
1、background-color:背景色
2、background-image:背景影像
例如：background-image: url(bgimage.gif);，當然也可以是這樣 background-image: url(“bgimage.gif”);也就是說單引號（雙引號）可加可不加
3、background-repeat：背景影像重復（平鋪）可能值：repeat-x/repeat-y/repeat(默認值)/no-repeat
4、background-attachment：背景滾動（也可以叫“背景附著"），attachment是“附著”的意思，background-attachment屬性用來設定背景影像是否固定或者隨著頁面的其余部分滾動
可能值：scroll(默認值)/fixed/local
5、background-position：背景影像定位（起始位置）
可能值1：方位1(left/center/right) 方位2(top/center/bottom)(方位1與方位2不分先后順序)
可能值2：x% y%(第一個是水平位置，第二個是垂直位置，不能互換）
可能值3：xpos ypos(x、y同上，一個水平，一個垂直，不能互換)
以上可以混合使用，
二、CSS3
6、background-size:背景影像尺寸
可能值1：width height(長度），比如：50px 40px
可能值2：width height(百分比),比如：20% 50%
可能值3：cover表示（在確保寬高比不變的情況下）背景影像(剛好)完全覆寫背景區域，影像在背景區域外的部分隱藏，
可能值4：contain表示（在確保寬高比不變的情況下）背景影像(剛好)完全裝入背景區域，背景影像(剛好)不超過背景區域（背景影像不一定完全覆寫背景區域），
7、background-origin:背景影像源點
可能值：border-box/padding-box(默認值)/content-box
8、background-clip:背景裁剪區域
可能值：border-box(默認值)/padding-box/content-box
三、連寫（簡寫）
1、前5個屬性（屬于CSS）連寫，后3個屬性(屬于CSS3)單獨寫
background:bg-color bg-image bg-repeat bg-attachment bg-position
前5個屬性不分先后順序，但是建議按照以上的順序來寫
2、前6個屬性（屬于CSS的5個再加上屬于CSS3的background-size)，后2個屬性(background-origin、background-clip)單獨寫
background:bg-color bg-image bg-repeat bg-attachment bg-position/bg-size
background-size一定要跟在background-position后面一起寫，并且要用“/”分隔，在滿足這個條件下，以上屬性仍然不分先后順序，但是仍然建議按照上面的順序寫
3、8個屬性全部連寫
background:bg-color bg-image bg-repeat bg-attachment bg-position/bg-size bg-origin bg-clip
除了上面說過的background-position/bg-size之外，還要求background-origin在前，background-clip在后，不能顛倒順序
在保證bg-position/bg-size、bg-origin在先bg-clip在后的條件下，可以不分先后順序
雖然8個屬性可以一起連寫，但是為了可讀性，不建議都寫在一起，推薦第1種方法或者第2種方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/901.html
標籤：Html/Css