CSS图标定位

标签：nta   osi   页面   inline   line   tle   alt   定位   img   

　　最近公司这样一个需求，如图：把一图标放在一张图片上，用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图标定位

标签：nta   osi   页面   inline   line   tle   alt   定位   img   

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