背景顏色
background-color：<color>
- 默認值：transparent
背景圖片
background-image:<bg-image> [ , <bg-image> ]*
<bg-image> = <image> | none
- 通過url()引入圖片地址
background-image: url("1.gif");絕對地址/相對地址，引號可以省略； - 可以引入多個圖片，先引入的在上面，后引入的在下面
- 可以同時設置背景顏色，背景顏色始終在圖片的下面，最下層
背景圖片平鋪
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： 背景圖像自動縮放直到適應且填充滿整個容器。（CSS3）
- space： 背景圖像以相同的間距平鋪且填充滿整個容器或某個方向。（CSS3）
說明：
- 必須先指定
<' background-image '>屬性 ，多個<repeat-style>和<' background-image '>一一對應 - 允許提供2個參數，如果提供全部2個參數，第1個用于橫向，第二個用于縱向。
- 如果只提供1個參數，則用于橫向和縱向。
背景固定
background-attachment：<attachment> [ , <attachment> ]*
<attachment> = fixed | scroll | local
取值
- 默認值：scroll
- fixed： 背景圖像相對于窗體固定。
- scroll： 背景圖像相對于元素固定，也就是說當元素內容滾動時背景圖像不會跟著滾動，因為背景圖像總是要跟著元素本身。但會隨元素的祖先元素或窗體一起滾動。
- local： 背景圖像相對于元素內容固定，也就是說當元素隨元素滾動時背景圖像也會跟著滾動，因為背景圖像總是要跟著內容。（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>： 用百分比指定背景圖像填充的位置。可以為負值。圖片百分比的位置定位到容器相對應百分比的位置 - <length>： 用長度值指定背景圖像填充的位置。可以為負值。
說明
- 如果只提供一個，該值將用于橫坐標；縱坐標將默認為50%（即center）。
- 如果提供兩個，第一個用于橫坐標，第二個用于縱坐標。
- 如果提供三或四個，每個
<percentage>或<length>偏移前都必須跟著一個邊界關鍵字（即left | right | top | bottom，不包括center），偏移量相對關鍵字位置進行偏移。 - 示例：假設要定義背景圖像在容器中右下方，并且距離右邊和底部各有20px
background:url(test1.jpg) no-repeat right 20px bottom 20px
- 也可以設置3個參數值
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> ]?- 設置一個圓、半徑以及圓心所在位置
-
[ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]？- 橢圓、兩個半徑以及中心點位置
-
<extent-keyword>- 漸變區域的大小，默認值farthest-side
- closest-corner | closest-side | farthest-corner | farthest-side
repeating-*-gradient()
重復漸變
背景圖片原點位置
設置背景圖片展示的區域
默認值padding-box
background-origin:<box>[,<box>]?
<box>=border-box|padding-box|content-box
注意：當使用 background-attachment 為fixed時，該屬性將被忽略不起作用。
背景圖片裁剪
設置元素的背景（背景圖片或顏色）是否延伸到邊框下面。
默認值 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： 將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。
背景樣式簡寫
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 '>
說明
背景顏色只能在最后那一層
