• 背景
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
    • Sprite 的使用
  • linear-gradient
  • radial-gradient
  • repeat-*-gradient
  • background-origin
  • background-clip
  • background-size
  • background shorthand

背景

background-color

background-color: <color>
background-color: #f00;
background-color: rgba(255, 0, 0, 0.5);
background-color: transparent; /* 默認(rèn)值 */

background-image

background-image: <bg-image>[, <bg-image>]*
/* <bg-image> = <image> | none */
background-image: url("../image/pic.png");
background-image: url("../image/pic.png0"), url("../image/pic1.png");
/* 多張背景圖時(shí)，先引入的圖片在上一層后引入則在下一層 */

NOTE：當(dāng)background-color 與 background-image 共存時(shí)，背景顏色永遠(yuǎn)在最底層（于背景圖片之下）。

background-repeat

background-repeat 需與背景圖片數(shù)量一致。

background-repeat: <repeat-style>[, <repeat-style]*
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

/*                   X 軸     Y 軸 */
background-repeat: no-repeat repeat;

• space 平鋪并在水平和垂直留有空隙，空隙的大小為圖片均勻分布后完整覆蓋顯示區(qū)域的寬高
• round 不留空隙平鋪且覆蓋顯示區(qū)域，圖標(biāo)會被縮放以達(dá)到覆蓋效果（縮放不一定等比）

background-attachment

當(dāng)頁面內(nèi)容超過顯示區(qū)域時(shí)，使用 local 使背景圖片同頁面內(nèi)容一同滾動。

background-attachment: <attachment>[, <attachment>]*
<attachment> = scroll | fixed | local

background-position

background-position: <position>[, <position>]*
<position> = [left|center|right|top|bottom|<percentage>|<length>]|[left|center|right|top|bottom|<percentage>|<length>] [left|center|right|top|bottom|<percentage>|<length>] | [center |[left|right][<percentage>|<length>]?]&&[center |[left|right][<percentage>|<length>]?]

/* 默認(rèn)位置為 */
background-position: 0 0;

/* percentage 是容器與圖片的百分比重合之處*/
background-position: 20% 50%;

/* 等同效果 */
background-position: 50% 50%;
background-position: center center;

background-position: 0 0;
background-position: left top;

background-position: 100% 100%;
background-position: right bottom;

/* 四個(gè)值時(shí)方向只為參照物 */
background-position: right 10px top 20px;

http://wiki.jikexueyuan.com/project/fend_note/images/B/background-position.jpg" alt="" />

Sprite 的使用

background-image: url(sprite.png)
background-repeat: no-repeat;
background-positon: 0 -100px

使用位置為負(fù)值將圖片偏移使需要的圖片位置上移并顯示正確的圖案。

linear-gradient

linear-gradient()
[[<angle> | to <side-or-corner],]? <color-step>[, <color-stop>]+
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [<percentage> | <length>]?

background-image: linear-gradient(red, blue);
background-image: linear-gradient(to top, red, blue);
background-image: linear-gradient(to right bottom, red, blue);
background-image: linear-gradient(0deg, red, blue);
background-image: linear-gradient(45deg, red, blue);
background-image: linear-gradient(red, green, blue);
background-image: linear-gradient(red, green 20%, blue);

http://wiki.jikexueyuan.com/project/fend_note/images/L/linear-gradient.jpg" alt="" />

radial-gradient

radial-gradient(   [ circle || <length> ] [ at <position> ]? , | [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? , | [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , | at <position> , <color-stop> [ , <color-stop> ]+ )

<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side
<color-stop> = <color> [ <percentage> | <length> ]?

background-image: radial-gradient(cloest-side, red, blue);
background-image: radial-gradient(circle, red, blue);
background-image: radial-gradient(circle 100px, red, blue);
background-image: radial-gradient(red, blue);
background-image: radial-gradient(100px 50px, red, blue);
background-image: radial-gradient(100px 50px at 0 0, red, blue);
background-image: radial-gradient(red, green 20%, blue);

http://wiki.jikexueyuan.com/project/fend_note/images/R/radial-gradient.jpg" alt="" />

repeat-*-gradient

background-image: repeating-linear-gradient(red, blue 20px, red 40px);
background-image: repeating-radial-gradient(red, blue 20px, red 40px);

http://wiki.jikexueyuan.com/project/fend_note/images/R/repeating-gradient.jpg" alt="" />

background-origin

案例模型

http://wiki.jikexueyuan.com/project/fend_note/images/B/background-box-model.png" alt="" />

決定背景 (0,0) 坐標(biāo)與 100% 坐標(biāo)的區(qū)域。默認(rèn)值為 padding-box。

<box>[, <box>]*
<box> = border-box | padding-box | content-box

background-image: url(red.png);
background-repeat: no-repeat;

background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;

http://wiki.jikexueyuan.com/project/fend_note/images/B/background-origin.jpg" alt="" />

background-clip

裁剪背景，默認(rèn)值為border-box。

<box>[, <box>]*
<box> = border-box | padding-box | content-box

background-image: url(red.png);
background-repeat: no-repeat;

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

http://wiki.jikexueyuan.com/project/fend_note/images/B/background-clip.jpg" alt="" />

background-size

<bg-size>[, <bg-size>]*
<bg-size> = [<length> | <percentage> | auto] {1, 2} | cover | contain

background-image: url(red.png);
background-repeat: no-repeat;
background-position: 50% 50%;

background-size: auto;
background-size: 20px 20px;
/* % 參照物為容器*/
background-size: 50% 50%;
/* 盡可能小，但寬度與高度不小過容器（充滿容器） */
background-size: cover;
/* 盡可能大，但寬度與高度不超過容器（最大完全顯示）*/
background-size: contain;

http://wiki.jikexueyuan.com/project/fend_note/images/B/background-size.jpg" alt="" />

background shorthand

[<bg-layer,]* <final-bg-layer>
<bg-layer> = <bg-image> || <position> [/ <bg-size>]? || <repeat-style> || <attachment> || <box> || <box>

/* 兩個(gè) <box> 第一個(gè)為 background-origin */
/* 兩個(gè) <box> 第二個(gè)為 background-clip */
/* 只出現(xiàn)一個(gè) <box> 則即是 background-origin 也是 background-clip */

<final-bg-layer> = <bg-layer> || <'background-color'>

background: url(red.png) 0 0/20px 20px no-repeat, url(blue.png) 50% 50%/contain no-repeat content-box green;

http://wiki.jikexueyuan.com/project/fend_note/images/B/background-shorthand.png" alt="" />