一些页面中需要有指定的背景图,宽度并不相同,需要适应各种尺寸的容器。因此需要把单个图片拆分成多个,部分图片进行拉伸。以适应容器宽度。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,<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='#19a2ff' stop-opacity='.2'/><stop offset='1' stop-color='#19a2ff' stop-opacity='0'/></linearGradient><linearGradient id='cxwv9jw2o__vn7afj05sb' x1='.074' y1='1' x2='.996' y2='1' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='#19a2ff' stop-opacity='.749'/><stop offset='.356' stop-color='#19a2ff' stop-opacity='.302'/><stop offset='.818' stop-color='#19a2ff' stop-opacity='.102'/><stop offset='1' stop-color='#19a2ff' stop-opacity='0'/></linearGradient><linearGradient id='cxwv9jw2o__084os828uc' x1='.161' x2='.721' y2='.806' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='#ffda23'/><stop offset='1' stop-color='#ff9d23'/></linearGradient><linearGradient id='cxwv9jw2o__65dnsr944e' y1='1' x2='1' y2='1' gradientUnits='objectBoundingBox'><stop offset='0' stop-color='#19a2ff' stop-opacity='0'/><stop offset='.307' stop-color='#19f7ff'/><stop offset='.507' stop-color='#fff'/><stop offset='.693' stop-color='#19e7ff'/><stop offset='1' stop-color='#19a2ff' 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='#16dfff' stop-opacity='.49'/><stop offset='1' stop-color='#b4f2ff' 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(#cxwv9jw2o__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(#cxwv9jw2o__vn7afj05sb)'/><path d='M232.139,148h-5.773l-13.856-24h5.773l13.855,24Z' transform='translate(-212.51 -106)' fill='url(#cxwv9jw2o__084os828uc)'/><path transform='translate(39.49 27)' fill='url(#cxwv9jw2o__5pnmrq3ypd)' d='M0 0H197V25H0z'/><path transform='translate(41.49 52)' fill='url(#cxwv9jw2o__65dnsr944e)' d='M0 0H180V2H0z'/></svg>") 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;
}