背景：50% 50% / 封面；这是什么意思？

Question

.slide{
    background: 50% 50% / cover; 
}

有什么作用background: 50% 50% / cover？

我知道背景语法是这样的 http://www.w3schools.com/css/css_background.asp

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

但为什么在我的代码中有50% 50% / cover？

Answer 1

一种。 background-position:50% 50%

在background-position具有这些值position( left/right/center top/center/bottom) |x% y%|xpos ypos|initial|inherit;

background-position:50% 50% 方法

第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您只指定一个值，另一个值将为 50%。. 默认值为：0% 0%

在这里阅读更多背景位置

B. background-size:cover

该background-size属性可以具有这些值background-size: auto|length|cover|contain|initial|inherit;

background-size:cover 做这个 ：

将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内

在这里看到背景大小

所以在你的代码中：

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

right top就是background-position这样50% 50%会在他们的位置上。你也没有background-size一套所以它的价值是auto

如果你想结合这两个代码就这样写

body {
background: url("img_tree.png") no-repeat 50% 50% / cover #ffffff ;
}

翻译成

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
background-color:#fff;
}