CSS的background简写方式里新增了新的属性值

在CSS2.1里，background属性的简写方式包含五种属性值 – background-color, background-image, background-repeat, background-attachment, and background-position。从CSS3开始，又增加了3个新的属性值，加起来一共8个。下面是按顺序分别代表的意思：

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

注意里面的反斜杠，它更font和border-radius里简写方式使用的反斜杠的用法相似。反斜杠可以在支持这种写法的浏览器里在position后面接着写background-size。

除此之外，你开可以增加另外两个描述它的属性值： background-origin 和 background-clip.

它的语法用起来像下面这个样子：

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

你可以用下面的演示检测你的浏览器是否支持这种写法：

关于浏览器的支持情况，大概所有的现代浏览器都支持这些新属性值，但对于一些非常老旧的浏览器(IE6/7/8)，最好在代码里提供一些万一不支持的补救机制。