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-color | background-image | background-repeat | background-position | background-size

Answer 2

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

Answer 3

这一行

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

实际上是 shorthand 版本：

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

/有效CSS，见formal syntax on MDN.

Answer 4

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

The cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.

这是他们的 sample fiddle

CSS 这行是什么意思？

What does this line mean in CSS?

css

syntax

background

background-size