background简写,真细啊！

背景原因

今天写需求，需要使用background简写属性，心想这还不简单吗，真男人写样式只需要两秒:

background:  url('./bg.png') no-repeat center contain ;

搞定！

上面设置的依次是 背景图片 背景平铺模式 背景位置 背景图片是保有其原有的尺寸还是拉伸到新的尺寸。

so easy~

看我ctrl + s 保存代码，编译。

嗯？ 怎么不生效？ 俺的背景呢？
打开控制台一看，好家伙，压根没生效:

问题排查

第一反应是这些属性有固定顺序，但是凭我练习两年半的经验，不应该啊，之前也是这样用的啊，遂打开MDN，仔细翻阅....

发现了下面这段话:

这让我更加确信 写的没毛病啊！！

background-attachment、background-color、background-image、background-position、background-repeat、background-size
这些属性可以以任意顺序书写。

见了鬼了,待我排查两小时(摸鱼...)

原因浮现

在仔细阅读文档后发现，其实在文档的上面，还有另外一段话：

我恍然大悟，索嘎，以后看文档不能马虎了，得仔细查阅，过于经验主义了，这都是细节啊！

background使用注意事项和总结

其实，使用background时，大部分时候 属性的顺序是可以任意位置书写的，
但是有两个属性有点特殊，那就是background-size和background-position，

当background简写同时有这两个属性时，那么必须background-position在前，background-size在后，且两者只能紧挨着书写并且以 "/"分隔。
例如:

错误: background: url('./bg.png') no-repeat center  contain ; // 没有以 "/"分隔

错误: background: url('./bg.png') center  no-repeat contain ; // 没有紧挨着书写

错误: background: url('./bg.png') no-repeat contain / center; //background-size写在了 background-position的前面


正确: background: url('./bg.png') no-repeat center / contain ; 

写在最后

其实MDN在关于background的文档最开头的例子中就有写：

只不过没有用语言描述出来，一般没有认真看很难发现，所以有时候能够静下心来认真查阅文档，真的会发现很多细节(甩锅:这tm是谁写的文档，出来挨打).