CSS 背景速记属性不适用于背景大小

Question

当我尝试将多行 CSS 组合成一行时，我会像这样设置背景图片的样式:

background: url("img/background.jpg") cover no-repeat;

它不起作用；然而，当我将封面和不重复移动到他们自己的行上时

background: url("img/background.jpg");
background-size: cover;
background-repeat: no-repeat;

图像效果很好。关于出了什么问题的任何提示或想法？我也经常注意到填充和边距等问题。

Answer 1

background 简写要求您还设置background-position 以设置background-size。您可以在 spec 中找到 background 速记的语法。 , 但简而言之，这两个属性的语法是

<bg-position> [ / <bg-size> ]

意思是“background-position，可选地后跟正斜杠，然后是 background-size”(适用通常的可选空白规则)

如果您不需要将background-position更改为不同的值，则初始值为0 0(两个轴上都为零):

background: url("img/background.jpg") 0 0 / cover no-repeat;