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

 

 

 

 实现方式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;
}

 

原文地址：http://www.cnblogs.com/yflbk-2016/p/16844070.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性