background缩写属性必须严格遵循css规范顺序：background-color、background-image、background-repeat、background-attachment、background-position / background-size；斜杠仅用于分隔position与size，且二者不可颠倒或省略；background-origin和background-clip不支持缩写；ie8不支持斜杠语法，需拆分为独立属性。
background 缩写属性的固定顺序不能乱
浏览器解析 background 时严格按 CSS 规范顺序匹配，顺序错一个，后面值就可能被忽略或误判。比如把 url() 放在颜色后面，浏览器会把图片路径当成颜色值尝试解析，直接失败。
- 标准顺序是：
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position/background-size - 斜杠
/是分隔符，只出现在background-position和background-size之间，多一个少一个都会让整条声明失效 -
background-origin和background-clip不支持缩写进background，必须单独写
常见错误：图片路径和颜色位置颠倒
最常踩的坑是把 background-image 写在 background-color 前面，尤其从设计稿或工具复制样式时容易粘贴错序。
- 错误写法：
background: url("bg.png") #fff;→ 浏览器认为url("bg.png")是颜色，报Invalid property value - 正确写法：
background: #fff url("bg.png");（此时repeat等用默认值） - 如果要显式控制平铺和位置，必须补全中间项：
background: #fff url("bg.png") no-repeat scroll center / cover;
background-size 在斜杠后，且必须紧跟 position
background-size 只能出现在 / 后，并且前面必须是 background-position，不能跳过或换位。
- 合法：
background: #000 url(a.jpg) center / 100% 100%; - 非法：
background: #000 url(a.jpg) 100% 100% / center;→100% 100%被当成了position，center没地方放，整条丢弃 - 省略
position时不能留空斜杠：background: #000 url(a.jpg) / cover;是错的；必须写成background: #000 url(a.jpg) 0 0 / cover;或干脆不用斜杠、不设size
IE8 及更老浏览器不支持斜杠语法
IE8 只认传统五参数顺序，不识别 / 和 background-size。如果你的项目还要兼容它，就得拆开写。
立即学习“前端免费学习笔记（深入）”；
- IE8 安全写法：
background-color: #fff; background-image: url(x.png); background-repeat: no-repeat; background-position: center; - 现代写法加前缀也没用：
background缩写里的/在 IE8 就是语法错误，不会 fallback，整条声明作废 - autoprefixer 不处理
background缩写，别指望它帮你降级
真正麻烦的不是记不住顺序，而是团队里有人顺手改了某条 background 声明，删掉一个值又没调好位置，结果在某个页面上图片突然不显示、背景色错乱——这种问题查起来特别慢，因为看不出哪错了。
