背景
在开发过程中经常会遇到这种交互，带有背景图的标题宽度需要根据标题文字的长度自适应。如果单纯的更改宽度进行横向拉伸，就会导致背景图形变，如下图所示：
理想状态下，应该只有中间部分自适应标题文字长度进行宽度的拉伸，而左右两端保持不变。
有如下几种方案可以实现这种效果：
- 分割拼接方案。
- 点九图方案。
实现方案
分割拼接方案
原理
该方案主要是将背景图分割成左中右三部分，中间部分保证基本不会受形变的影响。中间部分设置自适应宽度，左右两部分不变，然后再将三部分进行拼接。
比如上面的例子，背景图会被分割成如下三部分：
实现
布局代码：
样式代码：
效果
采用该方案后基本可以满足需求，且不会怎么受形变的影响。
缺点
当使用rem进行自适应缩放时，由于浏览器会舍弃小数点尾部部分的精度，会导致拼接处有间隙。如下图所示：
当出现这种情况时可以通过设置左右部分负margin，使它们与中间背景图部分重叠来解决。
修改后效果如下图求：
对于没有透明度的背景图可以通过部分重叠解决该问题，但是对于半透明的背景图该方案就会导致重叠部分颜色加深的问题，暂无解决方案。
九点图方案
原理
border-image 属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式。
当拉伸的时候，只有5，6，7，8，9会被拉伸，1，2，3，4则不变。
border-image有以下属性：
border-image-source：边框背景图路径。
border-image-slice：图片的裁剪位置，可以设1-4个参数，顺序跟margin、padding等一样。通过参数来确定对 border-image-source 图片的剪裁线。中间部分填充需要设置fill。
border-image-repeat：图片的重复方式。
border-image-width：边框背景宽度。
border-image-outset：边框背景扩散，相当于把原来的贴图位置向外延伸。
实现
布局代码：
样式代码：
效果
采用该方案后基本可以满足需求，且不会怎么受形变的影响。且经过实测后，暂未发现分割拼接方案所出现的缝隙问题。
