css div 三张背景图片

css div 宽度 1300 高度 46，同时给它设置三张背景图片 堆叠同时显示 ， 其一图片宽度1300 高度46 ，铺满整个div且距离最左侧偏移22px，其二图片宽度 44，高度43 ，在div的最左端，其三图片宽度83，高度43，在div的最右端，他们同时垂直居中在div中

 

 

.container {
  width: 1300px;
  height: 46px;
  background-image:
    url(whole-bg-image.png),
    url(left-image.png),
    url(right-image.png);

  background-repeat: no-repeat;
  background-position: 
    22px 0,               /* 图片1位置：距左端22px，顶部对齐 */
    0 center,              /* 图片2位置：左中心 */
    right center;          /* 图片3位置：右中心 */

  background-size: 
    cover,                 /* 图片1大小：铺满整个div */
    44px 43px,             /* 图片2大小：宽度44px，高度43px */
    83px 43px;             /* 图片3大小：宽度83px，高度43px */

  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}

 上面的问题，对于第二张和第三张图片，我希望用伪元素的方案解决，请给出方案

 

 

 

 

<div class="container">
  <div class="bg-first"></div>
</div>


.container {
  width: 1300px;
  height: 46px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bg-first {
  background-image: url(whole-bg-image.png);
  background-position: 22px 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  height: 43px;
  top: 50%;
  transform: translateY(-50%); /* 使图片垂直居中 */
}

.container::before {
  left: 0;
  background-image: url(left-image.png);
  background-repeat: no-repeat;
  width: 44px;
  background-size: contain; /* 保持图片原有宽高比 */
}

.container::after {
  right: 0;
  background-image: url(right-image.png);
  background-repeat: no-repeat;
  width: 83px;
  background-size: contain;
}