CSS的background简写方式

在CSS2.1里，background属性的简写方式包含五种属性值，从CSS3开始，又增加了3个新的属性值，加起来一共8个。

CSS2.1

• background-color         使用的背景颜色。

• background-image       使用的背景图像。

• background-repeat      如何重复背景图像。

• background-attachment  背景图像是否固定或者随着页面的其余部分滚动。

• background-position    背景图像的位置。

CSS3

• background-size        背景图片的尺寸。

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

• background-clip        背景的绘制区域。

简写形式

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

需要注意的是里面的/，它和font以及border-radius里简写方式使用的/用法相似。/可以在支持这种写法的浏览器里在background-position后面接着写background-size。
除此之外，你也可以增加另外两个描述它的属性值： background-origin和 background-clip

示例用法

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

作者：RunningCoderLee
链接：https://www.jianshu.com/p/fa07c2606380