这条线在CSS中意味着什么？

Question

这条线在CSS中意味着什么？

#ffffff url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center / cover

我想弄清楚。在W3S中，它说明了结构，但我似乎无法看到'/'以及其他属性如何匹配此结构。

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

Answer 1

这一行

background: #ffffff url(...) no-repeat center center / cover;

实际上是以下的速记版本：

background-color: #ffffff;
background-image: url(...);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;

/是有效的CSS，请参阅formal syntax on MDN。

Answer 2

如果你把它拆开，你会发现它按顺序阅读以下内容：

background-color | background-image | background-repeat | background-position | background-size

Answer 3

根据documentation - cover是缩放图片的特殊值：

  

封面值指定应调整背景图像的大小以使其为   尽可能小，同时确保两个尺寸都大于   或等于容器的相应大小。

这是他们的sample fiddle

Answer 4

这意味着此图像覆盖了白色背景; https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg，它是居中对齐的，并且会拉伸以适合宽度或高度，以最大者为准，同时保持其比例。