背景顏色
background-color：<color>
- 默認值：transparent
背景圖片
background-image:<bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
- 通過url()引入圖片地址
background-image: url("1.gif");絕對地址/相對地址同仆，引號可以省略详炬； - 可以引入多個圖片，先引入的在上面段直，后引入的在下面
- 可以同時設(shè)置背景顏色，背景顏色始終在圖片的下面寝受，最下層
背景圖片平鋪
background-repeat：<repeat-style> [ , <repeat-style> ]*
<repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2}
取值：
- 默認值：'repeat'
- repeat-x： 背景圖像在橫向上平鋪
- repeat-y： 背景圖像在縱向上平鋪
- repeat： 背景圖像在橫向和縱向平鋪
- no-repeat： 背景圖像不平鋪
- round： 背景圖像自動縮放直到適應(yīng)且填充滿整個容器坷牛。（CSS3）
- space： 背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。（CSS3）
說明：
- 必須先指定
<' background-image '>屬性 很澄，多個<repeat-style>和<' background-image '>一一對應(yīng) - 允許提供2個參數(shù)京闰，如果提供全部2個參數(shù)，第1個用于橫向甩苛，第二個用于縱向蹂楣。
- 如果只提供1個參數(shù)，則用于橫向和縱向讯蒲。
背景固定
background-attachment：<attachment> [ , <attachment> ]*
<attachment> = fixed | scroll | local
取值
- 默認值：scroll
- fixed： 背景圖像相對于窗體固定痊土。
- scroll： 背景圖像相對于元素固定，也就是說當(dāng)元素內(nèi)容滾動時背景圖像不會跟著滾動墨林，因為背景圖像總是要跟著元素本身赁酝。但會隨元素的祖先元素或窗體一起滾動。
- local： 背景圖像相對于元素內(nèi)容固定旭等，也就是說當(dāng)元素隨元素滾動時背景圖像也會跟著滾動酌呆，因為背景圖像總是要跟著內(nèi)容。（CSS3）
背景圖片定位
background-position：<position> [ , <position> ]*
<position> = [ left | center | right | top | bottom | <percentage> | <length> ] |
[ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
取值
- 默認值：
0% 0%;效果等同于:left top -
<percentage>： 用百分比指定背景圖像填充的位置搔耕∠对可以為負值。圖片百分比的位置定位到容器相對應(yīng)百分比的位置 - <length>： 用長度值指定背景圖像填充的位置弃榨∑惺眨可以為負值。
說明
- 如果只提供一個鲸睛，該值將用于橫坐標(biāo)娜饵；縱坐標(biāo)將默認為50%（即center）。
- 如果提供兩個官辈，第一個用于橫坐標(biāo)箱舞，第二個用于縱坐標(biāo)。
- 如果提供三或四個钧萍，每個
<percentage>或<length>偏移前都必須跟著一個邊界關(guān)鍵字（即left | right | top | bottom，不包括center）政鼠，偏移量相對關(guān)鍵字位置進行偏移风瘦。 - 示例：假設(shè)要定義背景圖像在容器中右下方，并且距離右邊和底部各有20px
background:url(test1.jpg) no-repeat right 20px bottom 20px
- 也可以設(shè)置3個參數(shù)值
background:url(test1.jpg) no-repeat left bottom 10px;
背景顏色漸變
線性漸變
linear-gradient([ [<angle> | to <side-or-corner>] ,]? <color-stop> [, <color-stop>]+)
<side-or-corner>=[left|right]||[top|bottom] 默認to bottom
<color-stop>=<color>[<percentage>|<length>]?
background-image:linear-gradient(red,blue)
background-image:linear-gradient(0deg,red,blue)
background-image:linear-gradient(red,green,blue)
background-image:linear-gradient(red,green 20%,blue) green在20%的位置
徑向漸變
radial-gradient([ circle || <length> ] [ at <position> ]? ,|
[ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? ,|
[ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? ,|
at <position> ,
<color-stop> [ , <color-stop> ]+)
-
[ circle || <length> ] [ at <position> ]?- 設(shè)置一個圓公般、半徑以及圓心所在位置
-
[ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]万搔？- 橢圓胡桨、兩個半徑以及中心點位置
-
<extent-keyword>- 漸變區(qū)域的大小，默認值farthest-side
- closest-corner | closest-side | farthest-corner | farthest-side
repeating-*-gradient()
重復(fù)漸變
背景圖片原點位置
設(shè)置背景圖片展示的區(qū)域
默認值padding-box
background-origin:<box>[,<box>]?
<box>=border-box|padding-box|content-box
注意：當(dāng)使用 background-attachment 為fixed時瞬雹，該屬性將被忽略不起作用昧谊。
背景圖片裁剪
設(shè)置元素的背景（背景圖片或顏色）是否延伸到邊框下面。
默認值 border-box
background-clip:<box>[,<box>]?
<box>=border-box|padding-box|content-box
背景圖片大小
background-size:：<bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
取值
- 默認值：
auto -
<length>： 用長度值指定背景圖像大小酗捌。不允許負值呢诬。 相對容器的百分比 -
<percentage>： 用百分比指定背景圖像大小。不允許負值胖缤。 -
auto： 背景圖像的真實大小尚镰。 -
cover： 將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器哪廓。 -
contain： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等狗唉，背景圖像始終被包含在容器內(nèi)。
背景樣式簡寫
background：[ <bg-layer>, ]* <final-bg-layer>
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <' background-color '>
說明
背景顏色只能在最后那一層
