background

css3中background的几个属性（goole测试）

1. background-clip（规定背景的绘制区域）

   1. background-clip: border-box|padding-box|content-box;
   2. border-box：背景被裁剪到边框盒。
   3. padding-box：背景被裁剪到内边距框。
   4. content-box：背景被裁剪到内容框。//只在内容区域显示
   5. js语法：object.style.backgroundClip="content-box"

2. background-size

   1. 在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的
   2. 在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。
   3. background-size: length|percentage|cover|contain;
   4. cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
   5. 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
   6. js语法：object.style.backgroundSize="60px 80px"

3. background-origin

   1. 属性规定背景图片的定位区域。
   2. 背景图片可以放置于 content-box、padding-box 或 border-box 区域。
   3. js语法：“object.style.backgroundOrigin=”content-box”

---

background-clip：border|padding|content

该属性指定了背景在哪些区域可以显示，但与背景开始绘制的位置无关，背景的绘制的位置可以出现在不显示背景的区域，这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

background-origin：padding|border|content
该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置，你可以用这个属性在边框上绘制背景，但边框上的背景显不显示出来那就要由background-clip来决定了

//以上有些内容取至w3c。