The background image realizes multi-image splicing without gaps or overlaps

Some pages need to have a specified background image with different widths and need to adapt to containers of various sizes. Therefore, it is necessary to split a single picture into multiple parts and stretch some pictures. to fit the container width. css provides this method, with the use of background-image, background-position (the starting position of the horizontal axis image), background-size (the first group: the end position of the horizontal axis of the first image; the second group: the image that needs to be stretched region-width), background-repeat

The effect is as shown in the figure:

The title background is generated with two background images, which can be used in areas of various sizes.

div.title-tag {
    line-height: 26px;
    height: 54px;
    text-align: left;
    padding: 14px 15px 14px 52px;
    box-sizing: border-box;// 如果div有padding或者margin使用该属性后，宽高不需要考虑去除padding或者margin的像素值
    background-image: url('../../assets/image/title-bg-l.png'), url('../../assets/image/title-bg-r.png');
    background-position: 0%, 400px;
    background-size: 400px 100%, calc(100% - 400px) 100%;
    background-repeat: no-repeat, no-repeat;
    // 使用svg当背景
    // background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' class='design-iconfont'><defs><linearGradient id='cxwv9jw2o__mdn7kntoma' x1='.032' y1='1' x2='1' y2='1' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='%2319a2ff' stop-opacity='.2'/><stop offset='1' stop-color='%2319a2ff' stop-opacity='0'/></linearGradient><linearGradient id='cxwv9jw2o__vn7afj05sb' x1='.074' y1='1' x2='.996' y2='1' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='%2319a2ff' stop-opacity='.749'/><stop offset='.356' stop-color='%2319a2ff' stop-opacity='.302'/><stop offset='.818' stop-color='%2319a2ff' stop-opacity='.102'/><stop offset='1' stop-color='%2319a2ff' stop-opacity='0'/></linearGradient><linearGradient id='cxwv9jw2o__084os828uc' x1='.161' x2='.721' y2='.806' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='%23ffda23'/><stop offset='1' stop-color='%23ff9d23'/></linearGradient><linearGradient id='cxwv9jw2o__65dnsr944e' y1='1' x2='1' y2='1' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='%2319a2ff' stop-opacity='0'/><stop offset='.307' stop-color='%2319f7ff'/><stop offset='.507' stop-color='%23fff'/><stop offset='.693' stop-color='%2319e7ff'/><stop offset='1' stop-color='%2319a2ff' stop-opacity='0'/></linearGradient><radialGradient id='cxwv9jw2o__5pnmrq3ypd' cx='.5' cy='1' r='.5' gradientTransform='matrix(1 0 0 2 0 -1)' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='%2316dfff' stop-opacity='.49'/><stop offset='1' stop-color='%23b4f2ff' stop-opacity='0'/></radialGradient></defs><path d='M249.355,175c-7.805-.037-13.392-11.173-13.392-11.173L213.491,125H975v50.016H863.385C514.429,175.017,251.957,175.013,249.355,175Z' transform='translate(-208.001 -123)' fill='url(%23cxwv9jw2o__mdn7kntoma)'/><path d='M249.482,178a12.016,12.016,0,0,1-6.48-2.081,21.855,21.855,0,0,1-4.692-4.221,33.52,33.52,0,0,1-4.018-5.911L210.016,124H975v2H213.491l22.557,38.827s5.609,11.137,13.443,11.173c2.613.012,266.086.016,616.371.016H975v2H865.862C459.176,178.016,251.8,178.011,249.482,178Z' transform='translate(-208.001 -124)' fill='url(%23cxwv9jw2o__vn7afj05sb)'/><path d='M232.139,148h-5.773l-13.856-24h5.773l13.855,24Z' transform='translate(-212.51 -106)' fill='url(%23cxwv9jw2o__084os828uc)'/><path transform='translate(39.49 27)' fill='url(%23cxwv9jw2o__5pnmrq3ypd)' d='M0 0H197V25H0z'/><path transform='translate(41.49 52)' fill='url(%23cxwv9jw2o__65dnsr944e)' d='M0 0H180V2H0z'/></svg>") center center;
}

3 background image examples:

.background {
  cursor: pointer;
  height: 90px;
  min-width: 350px;// 与width: fit-content;共同使用，实现自身的宽度自适应，而不使其余拥有相同class的元素影响宽度
  width: fit-content;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background-image: url('../../assets/image/map-svg-background-l.png'), url('../../assets/image/map-svg-background-m.png'),
    url('../../assets/image/map-svg-background-r.png');// 第一张图165px,第三张图105px，现在需要使第二张图进行拉伸，则使用background-position和background-size进行计算
  background-position: left, 165px, right;
  background-size: 165px 100%, calc(100% - 165px - 105px) 100%, 105px 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;

}