css背景设置多张图片自适应展示

要求：背景三块图组成，根据文字中间图自适应宽，两边固定

 

 

 

 实现方式1：

前后2个图片做绝对定位

中间做最外层的背景

  <div class="blockData__title" >
    <img class="imgLeft" src="xxx/leftBg.png" alt="">
    <img class="imgRight" src="xxx/title_rightBg.png" alt="">
    <div class="blockData__title_text" >
      文字文本内容加长版加长版
    </div>

.blockData__title {
  height: 51px;
  line-height: 51px;
  min-width: 170px;
  padding-left: 20px;
  padding-right: 40px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  background: url(xxx/title_middleBg.png)  no-repeat;
  background-position: center center;
  background-size: calc(100% - 92px) 51px;
  background-color: transparent;
  &_text {
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    // line-height: 25px;
    background: linear-gradient(360deg, #8EE0FF 0%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

 

方案2（推荐）： 背景图直接放三个图

 

  <div class="blockData__title" >
    <div class="blockData__title_text" >
      文字文本内容加长版加长版
    </div>
  </div>

.blockData__title {
  height: 51px;
  line-height: 51px;
  min-width: 170px;
  padding-left: 20px;
  padding-right: 40px;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  background-image:url(../../../assets/imagesZZ/title_leftBg.png),
  url(../../../assets/imagesZZ/title_middleBg.png),
  url(../../../assets/imagesZZ/title_rightBg.png) ;
  background-position: left top, center top, right top;
  background-size: 46px 51px, calc(100% - 92px) 51px,46px 51px;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-color: transparent;
}