css - 背景: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

A. background-position:50% 50%

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

background-position:50% 50% 表示

The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%

在这里阅读更多 background-position

B. background-size:cover

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

background-size:cover 这样做:

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

看这里 background-size

所以在你的代码中:

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;
}