background：背景。在css里面作为css属性一成员，通过该属性可设置背景图片、背景颜色、背景图片截取等样式。而仅仅一个background又具有多个子属性。

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-size（CSS3新增）
• background-origin（CSS3新增）
• background-clip（CSS3新增）
  background 简写属性可以在一个声明中设置以上的多个的背景属性。
  常用写法：background:背景颜色 背景图片 背景平铺 背景滚动 背景位置
  当然了，如果不设置其中的某个值，也不会出问题，比如 background:#ff0000 url('a.png'); 也是允许的。
  下面就来将这7个子属性详细的介绍一下。

1. background-color

颜色名称，如：background-color:red;
十六进制背景色，如：background-color:#f00;;
rgb颜色，这里如果是rgba，a表示透明程度，为0全透明，为1为完全不透明，
如：background-color:rgb(255,0,0.3);;
特殊值：transparent，透明色：background-color:transparent;

2. background-image

background-image属性用于为一个元素设置一个或多个背景图片，多个背景图片之间以逗号隔开。
一张图片：background-image: url(img/a.jpg);
多张图片：background-image: url(img/a.jpg),url(img/b.jpg);
特殊值：none，不显示背景图像
background-image: none;

3. background-repeat

background-repeat属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。
常用的4个值：
repeat：水平和垂直方向都重复图像，background-repeat: repeat;
repeat-x：水平方向重复图像
repeat-y：垂直方向重复图像
no-repeat：图像不重复

4. background-attachment

规定背景图像是否固定或者随着页面的其余部分滚动。
scroll：背景图像相对于页面不动，会随着网页的滚动而移动，默认
fixed：背景图像相对于浏览器窗口不动，内容滚动的时候背景图像不动
background-attachment: fixed;

5. background-position

第一个值为横坐标，第二个值为纵坐标。默认值为：(0% 0%)。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。
例如：background-position: right；代表背景图右侧，垂直方向居中的位置。
百分比位置，如：background-position: 20% 20%;
具体像素位置， 如：background-position: 20px 20px;

6.background-size

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

语法

单张图片的背景大小可以使用以下三种方法中的一种来规定：

• 使用关键词 [contain]
• 使用关键词 [cover]
• 设定宽度和高度值

当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:

• 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为[auto]
• 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

每个值可以是<length>, 是 <percentage>, 或者 [auto]。

示例：

background-size: contain;
background-size: 50%;
background-size: 3em;
background-size: auto 1em;
background-size: 50% 25%;

为了设定超过一张以上的图片尺寸时，需要提供多项数值，它们通过逗号分隔。

background-size: 50% 25%, contain, 3em;

属性值

<div id="box"></div>

CSS部分 背景图片分辨率为427*640

#box {
    background-image: url(/media/examples/hand.jpg);
    width: 100%;
    height: 100%;
}

分别给box的background-size属性添加不同的属性值，会产生不同的效果。

1、长度：可以用px、em、rem等指定背景图片大小，不能为负值。

7.background-clip

background-clip 裁剪，通常和background-origin一起使用，决定设置元素的背景（背景图片或颜色）是否显示。
注：background-clip只是将背景和背景色粗暴的裁剪。
该属性有四个值
border-box
背景延伸至边框外沿（但是在边框下层）。background-origin: border-box;

8.background-origin

background-origin 规定了指定背景图片[background-image] 属性的原点位置的背景相对区域.
border-box
背景图片的摆放以border区域为参考
padding-box
背景图片的摆放以padding区域为参考
content-box
背景图片的摆放以content区域为参考

background-origin与background-clip的区别

origin.png

样式：
先看一下background-origin属性。

      .bg{
          width: 100px;
          height: 100px;
          padding:50px;
          border: 10px dashed #000000;
          background: #ffff00 url('pic1.gif') no-repeat;
          margin-top: 10px;
          display: inline-block;
        }
        .bg_origin_border{
            background-origin: border-box;
        }
        .bg_origin_padding{
            background-origin: padding-box;
        }
        .bg_origin_content{
            background-origin: content-box;
        }

先看一下background-clip属性。

clip.png

      .bg_clip_border{
            background-clip: border-box;
        }
        .bg_clip_content{
            background-clip: content-box;
        }
        .bg_clip_padding{
            background-clip: padding-box;
        }

这就印证了background-clip只是将背景和背景色粗暴的裁剪。

好的，以上就是我对background的各个属性的理解，实际应用时可能会有部分出入，我们只需要掌握background-color、background-image、background-repeat、background-position、background-size这几个常用的属性即可。
欢迎大家一起交流，讨论。