css3之背景

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

background-size:width,height 可以设置背景图片的宽度以及高度

1、background-size设置背景图片的尺寸

     background-size:600px,auto;

       自动是适应盒子的宽度
         background-size: 100% auto;  当宽度发送改变时，高度会有内容溢出。

     常规用法，通过百分百，和像素来调整背景的尺寸.

     background-size: auto 100%;

cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

整个背景图片完整显示在背景区域.

contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

也可以使用长度单位或百分比

2、background-origin(原点，起点)设置背景定位的原点

所谓的背景原点就是调整背景位置的一个参照点.

调整背景图片定位的参照原点.

 

border-box以边框做为参考原点；

padding-box以内边距做为参考原点；

content-box以内容区做为参考点；

3、background-clip设置背景区域clip(裁切)  

border-box裁切边框以内为背景区域；

padding-box裁切内边距以内为背景区域；

content-box裁切内容区做为背景区域；

4、以逗号分隔可以设置多背景，可用于自适应局

背景图片尺寸在实际开发中应用十分广泛。