CSS----精灵图
1、引入css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .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
1 2 3 4 5 6 | <tr th:each= "listData:${pageResult.listData}" > <td> <div th: class = "'bank bank_'+${listData.bankName}" ></div> //通过修改${listData.bankName},赋给div不同的样式。不同的样式对应不同的图片背景 </td> <td>[[${listData.accountName}]]</td> </tr> |
举例使用
像这种进度条,就可以使用精灵图,当然我们可以使用插件,但是可能会出现不兼容的情况
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步