码迷,mamicode.com
首页 > Web开发 > 详细

css----精灵图

时间:2019-10-31 16:33:21      阅读:118      评论:0      收藏:0      [点我收藏+]

标签:idt   图片   block   tran   poi   alt   http   技术   进度   

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>

  

 

举例使用

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

         技术图片

技术图片

 

css----精灵图

标签:idt   图片   block   tran   poi   alt   http   技术   进度   

原文地址:https://www.cnblogs.com/yanxiaoge/p/11771714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!