CSS圖標定位

　　最近公司這樣一個需求，如圖：把一圖標放在一張圖片上，用background-position定位圖標;

1. background-image url("image/img")放一張背景圖片
2. background-repeat:no-repeat 不平輔
3. background-position:0px 0px 背景定位（x,y）

4. /* CSS代碼*/
   .icon-container {
       height: 16px;
       width: 16px;
       border-radius: 3px;
       display: inline-block;
       background: #ece0e0;
       border: 1px solid #ccc;
   }
   
   .icon {
       height: 100%;
       width: 100%;
       background: url("../images/icons.png");
       background-repeat: no-repeat;
   }
   
   .carat-1-n {
       background-position: 0px 0px;
   }
   
   .carat-1-ne {
       background-position: -16px 0px;
   }
   
   .carat-1-e {
       background-position: -32px 0px;
   }

   <!-- 頁面代碼 -->
       <div class="icon-container">
           <div class="icon carat-1-n" title=".carat-1-n"></div>
       </div>
       <div class="icon-container">
           <div class="icon carat-1-ne" title=".carat-1-ne"></div>
       </div>
       <div class="icon-container">
           <div class="icon carat-1-e" title=".carat-1-e"></div>
       </div>