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>

CSS图标定位

原文地址：https://www.cnblogs.com/gb-mybaits/p/10030194.html