标签:div 解决 set font 资源 contain http code 平台
问题描述:在一个三段式的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%;
}
完美解决
标签:div 解决 set font 资源 contain http code 平台
原文地址:http://www.cnblogs.com/xkloveme/p/7440509.html