css如何實現數字在圖標上顯示

我們分為兩步來實現： 第一步：通過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是設置圖標的左右位置。 因為之前我們數字的位置已經設置好了， 所以你只需要設置圖標的位置即可，直到數字顯示在圖標上達到我們的效果即可。