css - 背景:50% 50%/封面；这是什么意思？

Question

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

背景: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. 背景位置: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 属性可以具有以下值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;
}

右上角是背景位置，因此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;
}