css多张背景图动态平铺

请问怎么实现这三张不同的图做横向平铺背景图，并根据文字长度加宽中间部分的矩形图

img

img

img


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            .box{
                display: flex;
            }
            .text{
                height: 42px;
                background-image: url(./img/m.png);
                color: #fff;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="./img/l.png" />
            <div class="text">
                123
            </div>
            <img src="./img/r.png" />
        </div>
    </body>
</html>

图片我自己下载到本地了，l代表左，m代表中间，r代表右

中间宽度由内容自适应

img

<div id="app">
      <div id="b"></div>
      <div id="c">aaaaaaaa</div>
      <div id="a"></div>
    </div>

#app {
  display: flex;
}

#b {
  flex: 0 0 10px;
  background: url() no-repeat;
}

#a {
  flex: 0 0 10px;
  background: url() no-repeat;
}

#c {
  background: url() repeat-x;
}

需要文字在前后个背景图显示的话可以用负margin或者text-indent

包裹这三张图的div增加display: flex

{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
}

给中间的图片增加

{
          flex: 1
 }