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%表示

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

在此处阅读更多 background-position

B。 background-size:cover

这些值

background-size:cover这样做：

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

点击此处 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;
}

Answer 2

这意味着：背景：位置/大小。

这是helpful link，您可以在其中找到有关背景属性的详细信息

Answer 3

第一个和第二个值是元素的背景位置。第二个“封面”是元素的背景大小

背景：50％50％/覆盖;这是什么意思？

3 个答案: