css - 了解CSS背景速记属性

css背景属性的简写定义如下：

background: color position/size repeat origin clip attachment image|initial|inherit;

但随后我发现以下示例：

body {
  background: #00ff00 url('smiley.gif') no-repeat fixed center;
}

所以这里的顺序是：color-image-repeat-attachment-position

有什么理由可以更改此顺序？

最佳答案

速记属性尝试不对属性的值强加特定顺序，但是，当这些属性具有不同类型的值时，这会很好地工作，但是当这些属性可以具有相同的值时，则不适用。

后台简写属性具有不同类型的值，因此值的顺序不应引起错误，但是您应遵循标准顺序以保持良好的可读性。

这是来自mozilla开发人员中心的一本关于速记属性的手册，我在第3点的“ Tricky Edge Cases”下可以看到我引用的有关该顺序的声明。

https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties

关于css - 了解CSS背景速记属性，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25563068/