CSS使用background简写遇到的坑

前言

在使用backgound简写设置背景时，遇到了一个小坑，记录一下，提醒自己，要细心哪。

background简写支持的属性

• background-color —背景颜色
• background-position —背景位置
• background-size —背景大小尺寸
• background-repeat —如何重复
• background-origin —制定背景定位的相对位置
• background-clip —背景区域
• background-attachment —背景固定或滚动
• background-image —背景图像的地址

background简写顺序

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

遇到的坑— background-size不生效

在按照上面的顺序设置属性时，发现background- size并没有生效。

background: url(../img/a.png) contain no-repeat;

之所以出现这个问题是因为楼主的需求中不需要设置background-position，所以就忽略其，直接设置了background-size。
但在简写形式下，是不可省略background-position的，如下改写即可正确实现。

background: url(../img/a.png) 0/contain no-repeat;