css—-精灵图

1、引入css

.bank { background: url("../images/bank_list.png") no-repeat scroll 0 0 transparent; cursor: pointer; display: block; height: 32px; width: 140px; text-indent: -9999px; vertical-align: 0;}.bank_1 { background-position: 0 0;}.bank_2 { background-position: 0 -35px;}.bank_3 { background-position: 0 -70px;}.bank_4 { background-position: 0 -105px;}

html

 <tr th:each="listData:${pageResult.listData}"> <td> <div th:class="‘bank bank_‘+${listData.bankName}"></div>//通过修改${listData.bankName},赋给div不同的样式。不同的样式对应不同的图片背景 </td> <td>[[${listData.accountName}]]</td></tr>

  

 

举例使用

  像这种进度条,就可以使用精灵图,当然我们可以使用插件,但是可能会出现不兼容的情况

         

 

相关文章