咨询CSS background简写属性的官方顺序及权威规则来源

一、权威CSS规则的来源 #

权威的CSS标准来自**W3C（万维网联盟）**发布的官方CSS规范，所有浏览器的CSS实现均以此为核心依据。

二、如何确定background属性的官方顺序 #

background属于复合属性，可一次性设置多个背景相关子属性。官方规范对部分子属性的顺序有明确要求，其余则无强制限制：

• 有严格顺序要求的情况：background-position 必须放在 background-size 之前，且两者需用斜杠 / 分隔，例如：background: url(bg.jpg) 10px 20px / 50px 50px;
• 颜色属性background-color必须放在所有属性的最后
• 其余子属性（如background-image、background-repeat、background-attachment等）的顺序可自由调整，浏览器都能正确解析

W3C规范定义的background复合属性正式结构为：
[ <bg-layer> ]* <final-bg-layer>
其中<bg-layer>的可选顺序为：[ <bg-image> || <bg-position> [ / <bg-size> ]? || <bg-repeat> || <bg-attachment> || <bg-origin> || <bg-clip> ]
<final-bg-layer>则在上述结构基础上添加background-color（必须后置）。

三、官方是否声明顺序无关紧要 #

官方规范仅对部分子属性（颜色、position与size的组合）强制了顺序，其余子属性确实无固定顺序要求——只要取值不产生歧义，浏览器就能正常识别。你看到不同教程给出不同顺序，是因为这些只是推荐的常用写法，并非强制标准。

举几个有效写法的例子：

/* 常规写法 */
background: #fff url(bg.jpg) no-repeat center/cover;
/* 调整子属性顺序，同样生效 */
background: url(bg.jpg) center/cover no-repeat #fff;
/* 拆分单属性写法，与复合写法等价 */
background-color: #fff;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;

不过建议遵循规范推荐的常用顺序，能提升代码可读性，方便团队协作。

内容的提问来源于stack exchange，提问作者Igor Laszlo