css和jQuery ，字符串中重新定义单个字符样式背景

 <table class="tb2">
 <tr><td class="td1">融资登记企业<span>985</span>个</td><td class="td2">融资项目数量<span>985</span>个</td><td class="td3">融资需求金额<span>985</span>万元</td></tr>
  <tr><td>完成融资企业<span>00008</span>个</td><td>完成融资数量<span>985</span>个</td><td>完成融资金额<span>985</span>万元</td></tr>
 </table>

背景图



.tb2 td span i{background:url(../images/numbg.png) no-repeat 0px 0;

display:inline-block;
font-size:20px;color:#ff0000;font-weight:bold;font-family:Arial;line-height:30px;display:inline-block;height:28px;width:27px;text-align:center;font-style:normal}

  $(".tb2 td span").each(function () {//遍历每个span元素
         var str = $(this).text();
         var arr = str.match(/./g); //将元素中的单个字符组成数组
         var str2 = "";
         for (var i = 0; i < arr.length; i++) {
             str2 += arr[i].replace(arr[i], "<i>" + arr[i] + "<\/i>"); //将数组元素替换，并且带有i标签
         }
         $(this).html(str2); //对当前元素进行新的赋值，例如将数字985替换为<i>9</i><i>8</i><i>5</i>的格式
     });

 

最终效果

如果用背景平铺和letter-spacing，是达不到这种效果的，数字的前面和后面部分都会有一小段出现

转载于:https://www.cnblogs.com/qigege/p/5075297.html