目录
原理：
1.精灵技术主要针对背景图片使用，就是把多个小背景整合到一张大图中
2.这个大的图片我们称为sprites精灵图
3.移动背景位置，此时可以用background-position
4.移动的距离就是这个目标图片的X和Y坐标，注意网页中的坐标有所不同。向右是X轴、向下是Y轴。
5.因为一般情况下都是往上往左移动，所以是负值。
6.图片默认显示的是左上角，这个使用我们要去位移它
ps基本操作：附录2-PS基本操作_一键抠图分图层_Suyuoa的博客-CSDN博客
代码实现：
<body>
<div >
<ol id="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
//利用for循环修改精灵图的background- position
// 1.获取元素
var lis = document.querySelectorAll('li');
for (var i = 0; i < lis.length; i++){
var index = i * 110;
lis[i].style.backgroundPosition = '-'+index+'px 0' ;
}
</script>
</body>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
ol{
width: 180px;
height: 180px;
background-color: pink ;
margin: 100px auto;
}
ol li{
float: left;
width: 30px;
height: 30px;
background: url("./images/水果.png") no-repeat;
/* background-color: yellow; */
margin: 15px;
}
</style>
扫一扫
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
