这条线在 CSS 中是什么意思？答案

【问题标题】：What does this line mean in CSS?这条线在 CSS 中是什么意思？
【发布时间】：2016-10-31 16:29:18
【问题描述】：

这一行在 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;

【问题讨论】：

【解决方案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。

【讨论】：

【解决方案2】：

如果你把它分开，你会看到它按顺序读取以下内容：

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

【讨论】：

【解决方案3】：

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

cover 值指定背景图像的大小应为尽可能小，同时确保两个维度都大于或等于容器的相应大小。

这是他们的sample fiddle

【讨论】：

【解决方案4】：

表示这张图片覆盖了白色背景； https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg，它居中对齐，并且会拉伸以适应宽度或高度（以最大者为准），同时保持其比例。

【讨论】：