css中background-size属性一定要放在background属性后面

在学习css的过程中发现一个有意思的小细节,background-size属性一定要放在backgroud属性后面.(不过感觉大部分人都不会有这个问题,谁会先写size再定义背景图呢…好吧是我了)
错误写法:

.map1{
        height: 5rem;
        width: 5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-size: 100% 100%;
        background:url(../images/map.png);
        opacity: 0.3;
      }

显示的图是这样的:

正确写法:

.map1{
        height: 5rem;
        width: 5rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background:url(../images/map.png);
        background-size: 100% 100%;
        opacity: 0.3;
      }

显示效果:

好了结束,我看了好几遍,就没想到是顺序问题…