雪碧图的定位
Posted myshy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了雪碧图的定位相关的知识，希望对你有一定的参考价值。
首先需要给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;
}
}
以上是关于雪碧图的定位的主要内容，如果未能解决你的问题，请参考以下文章