background

相比css2，css3增加了background-size，background-clip，background-origin，这些属性可以连写，也可以分开写，如果是连写，则size必须在position后面，且用/隔开，即background-position/background-size。

background-size

background-size:auto || <length> || <percentage> || cover || contain ：

• auto:默认值：保持背景图片的原始高度和宽度
• length：用于设置具体的值来改变图片的大小
• percentage：百分值，只能用在块元素上。用来根据所在元素的宽高的百分比来计算
• cover：将图片放大，以适合铺面整个容器，当图片比容器小时，又无法使用background-repeat来了实现时，就可以采用cover，将图片放大到适合容器的大小，但这种方法会使图片失真
• contain：与cover相反，主要用于将图片缩小，以适合铺满整个容器，主要用于图片比容器大，又需要将整个图片完全显示的情况，同样也会使图片失真

background-clip

background-clip:用来确定背景的剪裁区域，也就是控制元素背景显示区域。在盒模型中，background-color是从左上角到右下角的，而背景图填充是从padding内部边缘的左上角到border的右下角。一共有三种取值：

• border-box：默认值，背景从border区域向外剪裁，超出部分将被剪裁掉
• padding-box：背景从padding区域向外剪裁，超过padding区域的背景将被剪裁掉
• content-box：背景从content区域向外剪裁，超过content区域的背景将被剪裁掉

<style>
.demo{
            width:160px;
            height:115px;
            padding:20px;
            border:20px dashed rgba(255,0,0,0.8);
            background:green url("../img/01.png") no-repeat;
            font-size:16px;
        }
</style>
<div class="demo">background  clip text </div>

此时背景色是充满整个区域的，包括边框border部分，只是被覆盖了，而背景图片的左上角是没有被覆盖的，只有右下角被覆盖。下面分别使用border-box、padding-box、content-box赋值给background-clip来裁剪背景图：

    

使用border-box时，因为background-clip的默认值是border-box，所以此时和没有添加处理的效果是相同的。

使用padding-box时，超过padding边缘的背景都被剪裁掉了，此时的剪裁并不是让背景成比例的剪裁，而是直接将超过padding边缘的背景剪裁掉。

使用content-box时，背景只在内容区域显示，超过内容边缘的背景直接被剪裁掉了。

 background-clip的使用

<style>
.add{
            margin-top:100px;
            width:260px;
            height:240px;
            font-size:16px;
            color:#303030;
            text-align:center;
            position:relative;
            border:1px solid #303030;
        }
        .addbg{
            position:absolute;
            z-index: 100;
            top:10px;
            left:10px;
            width:160px;
            height:130px;
            padding:20px;
            border:20px solid rgba(134,134,134,0.8);
            background:#3b5a98 url("../img/01.png") no-repeat;
            border-radius:15px;
            background-clip:padding-box;
        }
</style>
<div class="add">FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  FaceBook  
            <div class="addbg"></div>
        </div>

background-origin

 background-origin主要用于改变背景图片的position位置。在使用过程中，最好新旧语法一起用，新语法放在老语法后面

background-origin:padding || border || content(老版本)

background-origin:padding-box || border-box || content-box(新版本)

• padding-box：默认值，决定background-position的起始位置从padding的外边缘（border的内边缘）开始显示背景图片
• border-box：从border的外边缘开始显示背景图片
• content-box：从content的外边缘（padding的内边缘）开始显示图片背景

<style>
.demo{
            width:160px;
            height:115px;
            padding:20px;
            border:20px dashed rgba(255,0,0,0.8);
            background:green url("../img/01.png") no-repeat;
            font-size:16px;
            }
</style>
<div class="demo">background  origin </div>

 此时是默认的位置，下面分别使用padding-box、border-box、content-box赋值给background-origin来改变position的位置。

   

使用padding-box时，因为background-origin的默认值是padding-box，所以此时和没有添加处理的效果是相同的。

使用padding-box时，背景图片从刚才的padding外边缘移动到了border的外边缘，其实background-position并没有改变，依旧是left top；但是background-origin把background-position的原点位置改变了，从当初的padding外边缘移动到了border的外边缘。在background-origin属性还没有出现时，做这样的效果，都是通过改变background-position的值，就拿这个例子来说吧，我们边框的20px的大小，那么需要把背景图片从边框的外边缘处开始的话，那只有改变background-position的初始值，也就是变成background-position:-20px -20px；

使用content-box时，background-position的起点位置就由当初的padding外边缘移动到现在content的外边缘处了，换句话说，background-position由当初的(left top)位置变成了现在的(20px 20px)，因为这个Demo的padding为20px。

面实例都是在background-attachment:scroll下。但是如果将background-attachment设置为fixed时，background-origin将不起任何作用。并且background-origin取任何值将不会影响bodybackground-image的任何设置。  background-clip主要是用来控制背景（背景色和背景图片）的显示区域，其主要配合background-origin来制作不同的效果；而background-origin主要是用来控制背景图片的background-position位置，并且其只能控制背景图片。

css3 Multiple background

css3的多背景，用于给同一个元素设置多个背景图片，即在同一个元素上可以设置除background-color外多个background的其他属性，其中background-image需要多个，但多个图片之间 使用逗号隔开，而其他的属性可以选择一个或多个，如果有多个背景图片时，其他属性只有时，那么所有的背景图片应用了相同的属性设置，但background-color只能设置一个。