CSS背景

一、背景色与绘制区域

背景色

background-color: <color> | transparent;

• 默认值为transparent。
• 多个背景中，只有最后一个背景允许有背景色。

裁剪/背景绘制区域

background-clip: <box>;
/* <box> = content-box | padding-box | border-box; */

• 默认值为border-box，表示背景延伸到border外沿，但在border之下。换句话说，就是背景区域默认包含border、padding和内容区。
• 如果没有设置背景颜色或图片，那么这个属性只有在border为透明或半透明时才能看到视觉效果。

属性简写

background: [ <bg-layer> , ]* <final-bg-layer>;
/* <bg-layer> = <bg-img> || <pos> [/ <bg-size>]? || <repeat> || <attach> || <box>{1,2};
  <final-bg-layer> = <bg-layer> || <color>;
 */

• 一个<box>代表background-origin；两个<box>，第二个代表background-clip。
• 可以有多个背景，相互堆叠，第一个背景在最上面；以逗号隔开。

二、背景图

设置背景图片

background-image: [ <bg-img> | none ]#;
/* <bg-img> = url(<path>) | <gradient> */

• 默认值为none。
• <path>是图片地址，可以用引号包围也可以不用。
• <gradient>表示渐变，是CSS3属性，具体参考“三、渐变”。

背景图片的定位区域

background-origin: <box>#;
/* <box> = content-box | padding-box | border-box; */

• 默认值为padding-box，表示背景图像区域只包含padding和content。
• 当设置background-attachment:fixed时，忽略该属性。
• CSS3属性，IE8-不支持。

背景图片的尺寸

background-size: <bg-size>#;
/* <bg-size> = [ <width> <height>? ] | cover | contain; */

• 默认值为auto：如果图片有固定尺寸，则按尺寸显示；否则如果有固定比例，则按比例计算；否则按背景区域的尺寸。
• cover表示覆盖背景区域，图片要尽可能小，但宽高不能小于容器。
• contain表示适应内容区域，图片要尽可能大，但宽高不能大于容器。
• 如果背景图片未覆盖背景区域，未覆盖区域会显示background-color颜色；如果背景图片为透明或半透明，background-color颜色会露出来。
• CSS3属性，IE8-不支持。

背景图片的起始位置

background-position: <pos>#;
/* <pos> = <pos1> | <pos2> | <pos3>;
  <pos1> = left | center | right | top | bottom | <len-%>;
  <pos2> = [ left | center | right | <len-%> ][ top | center | bottom | <len-%> ];
  <pos3> = [ center | [ left | right ] <len-%>? ] && [ center | [ top | bottom ] <len-%>? ];
  <len-%> = <length> | <%>;
 */

• 需要设置x坐标和y坐标；默认值为0% 0%，相当于top left或left top，即背景区域的左上角。
• 如果只设置了一个坐标，那另一个坐标的值默认为center或50%。
• <%>表示图片的百分比位置和父元素的百分比位置重合。
• 可以分开设置xy坐标：background-position-x和background-position-y。
• Firefox和Opera需要设置background-attachment:fixed才能生效。
• <pos3>语法说明：

  /* 图片距离容器上边10px，距离容器右边5px */
  background-position: top 10px right 5px;
  /* 图片距离容器下边8px，靠左 */
  background-position: left bottom 8px;
  

背景图片重复

background-repeat: <repeat>;
/* <repeat> = repeat | repeat-x | repeat-y | no-repeat | space | round; */

• 默认值为repeat，即从原点开始向右（水平）、向下（垂直）重复。
• repeat-x和repeat-y分别表示在水平方向或垂直方向重复，no-repeat表示不重复。
• space：当图片超过背景时裁剪图片，否则尽可能地重复。第一张和最后一张图像固定在元素两侧，同时空白会均匀地分布在图像之间，此时会忽略background-position属性。
• round：缩放图像以平铺在背景上。

背景图片关联

background-attachment: <attach>;
/* <attach> = scroll | local | fixed; */

• 默认值为scroll，表示背景相对于元素本身固定，不随着元素内容滚动，但会随着页面其余部分滚动。
• local表示背景相对于元素的内容固定，并且背景区域和定位区域是相对于可滚动的区域而不是包含他们的边框。简单地说，就是内容和背景同步滚动。
• fixed表示背景相对于视口固定，不滚动。

三、渐变

线性渐变

linear-gradient([ <angle> | to <side-or-corner>, ]? <color-stop>#{2,})
/* <side-or-corner> = [ left | right ] || [ top | bottom ];
  <color-stop> = <color> <len-%>?;
 */

• <angle>表示顺时针角度，单位为deg。
• <side-or-corner>表示渐变线的起始点位置（加to表示方向），需要设置水平和垂直俩方向的值。
• left==270deg，right==90deg，top==0deg，bottom==180deg。
• <color-stop>表示某个确定位置的固定色值，至少要写2个值，用逗号分隔。
• 示例：

  /* 自blue开始向上渐变，在40%处变成green，以red结束 */
  background-image: linear-gradient(0deg, blue, green 40%, red);
  

径向渐变（中心辐射）

radial-gradient([ <shape> || <size> ][ at <pos> ]? , <color-stop>#{2,})
/* <shape>  =  circle || ellipse;
  <size> = <ex-keyword> | <length> | <len-%>{2};
  <ex-keyword> = closest-side | farthest-side | closest-corner | farthest-corner;
  <color-stop> = <color> <len-%>?;
 */

• <shape>表示渐变的形状，默认值为ellipse（椭圆）；circle是正圆。
• <pos>表示圆心位置，参考background-position。
• <ex-keyword>描述轮廓的具体位置（离圆心最近或最远的边或角），默认值为farthest-corner。
• 如果只写<color>，则椭圆经过farthest-corner点，其半径比例为<pos>到closest-side的比例（简单地说就是x:y）。
• 示例：

  background-image: radial-gradient(ellipse farthest-corner at 470px 47px, #ff0 20%, rgba(204,153,153,0.4) 30%, #e6f 60%);
  

渐变重复

repeating-linear-gradient()
repeating-radial-gradient()