利用for循环设置一组元素的精灵图背景。
精灵图获取路径:https://img.alicdn.com/tfs/TB1tyFSXm_I8KJjy0FoXXaFnVXa-48-1194.png
分析:
- 首先精灵图图片排列有规律(该图片在同一X轴上,Y轴上相邻图片之间相距44px);
- 核心思路:利用for循环 修改精灵图片的背景位置background-positin;
- 数学思路:让循环里的 i 索引号 * 44 就是每个图片的 y 坐标。
具体代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>循环精灵图</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 200px;
margin: 100px auto;
}
.box li {
float: left;
width: 24px;
height: 24px;
background-color: pink;
margin: 15px;
background: url(img/sprite.png) no-repeat;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li&