问题描述：在一个三段式的navbar中，各段下面有一个长图（类似这样的）
在优化之前需要加载三张大图这无疑增加了资源请求数量
因此，我想到了将图片转换为背景以此减少请求没想到方案是可行的，上代码
<div class="page-navbar"> <!-- navbar --> <mt-navbar class="page-part" v-model="selected" swipeable> <mt-tab-item id="1">平台介绍</mt-tab-item> <mt-tab-item id="2">雇佣模式</mt-tab-item> <mt-tab-item id="3">3天试用</mt-tab-item> </mt-navbar> <!-- tabcontainer --> <mt-tab-container v-model="selected" class="imgadapt"> <mt-tab-container-item id="1"> <div class="sprite1"></div> </mt-tab-container-item> <mt-tab-container-item id="2"><div class="sprite2"></div> </mt-tab-container-item> <mt-tab-container-item id="3"> <div class="sprite3"></div> </mt-tab-container-item> </mt-tab-container> </div>
重点来了
.sprite1 {background: url('../assets/1.jpg') no-repeat;width: 5.25rem;height: 14.77rem;background-size:100% 100%;}
.sprite2 {background: url('../assets/2.jpg') no-repeat ;width: 5.25rem;height: 14.77rem;background-size:100% 100%;
}
.sprite3 {background: url('../assets/3.jpg') no-repeat;width: 5.25rem;height: 14.77rem;background-size:100% 100%;
}
完美解决