背景图片实现多图片拼接，并不出现缝隙或重叠

一些页面中需要有指定的背景图，宽度并不相同，需要适应各种尺寸的容器。因此需要把单个图片拆分成多个，部分图片进行拉伸。以适应容器宽度。css提供了该方法，配合使用background-image，background-position（横轴图片起始位置），background-size（第一组：第一张图片横轴结束位置；第二组：需要拉伸图片的区域宽度），background-repeat

效果如图：

标题背景用两张背景图片生成，可适应多种尺寸的区域使用。

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,") center center;
}

3张背景图示例：

.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;}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！