css background 多张图片拼接

背景：公司ui设计了一张切图16*16的背景图，用来公告消息的展示，但是装1位数字是没问题的，装2-3位数字的话，就装不下。于是我让ui同学，把切图切成了三个部分，左-中-右，让两边的固定，中间的去自适应。

     background-image: url('./images/icon-popver-right.webp'), url('./images/icon-popver-middle.webp'),
        url('./images/icon-popver-left.webp');
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size:
        6px 100%,
        calc(100% - 12px) 100%,
        6px 100%;
      background-position: left, center, right;

刚开始我是把左右两边的宽度也设置auto了，导致样式无法正确拼接，不断的去调整background-size最后 终于成功了。