CSS的background简写方式

简写形式

background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

新增加的CSS3属性使用 / 号进行分隔 并且为可选项

示范写法

.example {
  background: aquamarine 
              url(img.png) 
              no-repeat 
              scroll 
              center center / 50% 
              content-box content-box;
}

CSS3 新增加的属性

background-origin 背景图片的定位区域。

border-box

content-box

padding-box

background-clip 背景的绘制区域。

border-box

padding-box@2x.jpg

content-box

background-size 背景图片的尺寸。下面是文档的扯蛋

contain 纵横比保持一致，根据背景能够容纳的最大数放大或缩小背景图像
cover 纵横比保持一致，根据背景能够容纳的最小量放大或缩小背景图像

contain

cover

人话:
contain 以左上角按为原点 按比例拉伸 到显示完整内容
cover 以左上角按为原点 按比例拉伸 到一边铺满容器

background-size 如果只设置一个值，则第二个值会被设置为 "auto"。