首页 > 其他 > 详细

雪碧图的定位

时间:2018-08-25 16:10:29      阅读:172      评论:0      收藏:0      [点我收藏+]
首先需要给li设定一个恰当的固定的宽高
比如{width: 24px;height: 24px;}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
需要用baocground-image: url();引入雪碧图
利用background-position: X Y;对雪碧图进行移动定位;X为雪碧图x轴平移,Y为雪碧图y轴平移(xy根据具体情况调整)
style{
  ul>li:nth-of-type(1){
    background-image: url("./sprite.png");
    background-position: 0 0;
    height: 24px;
    width: 24px;
  }
  ul>li:nth-of-type(2){
    background-image: url("./sprite.png");
    background-position: 0 -44px;
    height: 24px;
    width: 24px;
  }
  ul>li:nth-of-type(3){
    background-image: url("./sprite.png");
    background-position: 0 -88px;
    height: 24px;
    width: 24px;
  }
  ul>li:nth-of-type(4){
    background-image: url("./sprite.png");
    background-position: 0 -132px;
    height: 24px;
    width: 24px;
  }
  ul>li:nth-of-type(5){
    background-image: url("./sprite.png");
    background-position: 0 176px;
    height: 24px;
  width: 24px;
  }
  ul>li:nth-of-type(6){
    background-image: url("./sprite.png");
    background-position: 0 -220px;
    height: 24px;
    width: 24px;
  }
}
 

雪碧图的定位

原文:https://www.cnblogs.com/myshy/p/9534379.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!