我们在写前端页面的时候经常会遇到带有数字的图标,例如在百度地图上标记地点的红色图标,上面的图标显示这12345…等这些数字,那么如何去实现让数字或者字母显示在图标上呢?
我们分为两步来实现:
第一步:通过css来先固定数字的位置。代码如下
(1)div中定义数字的class属性:
<span class="catalog_number">1</span>
css中
(2)在css中设置数字的位置
.catalog_number{
padding-left: 10px;
padding-top: 10px;
float: left;
color: white;
font-size: 12px;
font-weight: 500;
}
第二步:我们来设置图标的位置,通过设置图标的位置让图标和数字重合,这样就达到我们要的效果了。这里我们也是首先要先设置图标的class属性值
class=”catalog_blue_point”
然后在css里面设置图标的位置
.catalog_blue_point{
background: url(../img/run/bluepoint.png) no-repeat;
background-position: 4px 7px;
float: left;
}
background:url就是我们图标的地址,也就是你放置图片的地址,no-repeat就是不重复。background-position: 4px 7px;这是设置我们图标的位置。4px是设置图标的上下位置,7px是设置图标的左右位置。
因为之前我们数字的位置已经设置好了, 所以你只需要设置图标的位置即可,直到数字显示在图标上达到我们的效果即可。