精灵图的概念:w3school网站的菜单鼠标悬浮切换就是采用背景大图实现的,页面中每一个部分都可以是一张小图,就是选中大图的一张小图进行切换,这个大图就叫精灵图
右键检查 -> sources -> ui2017 -> bg.png
PS:为什么用大图不用小图,因为程序中最耗时的就是在网络传输之后进行的I/O操作,如果都是用小图,那么就不停的进行I/O操作,这样当小图量达到一定量的时候,难免会影响页面加载的速度,用大图只要做一次请求,就获得所有的资源,这样加载的速度就会很快
PS:精灵图操作永远是上移或者左移,就是负值,如果正值就会出现空白区域
1、基本的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精灵图的操作</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: yellow;
/*加载背景图片*/
background-image: url("img/bg.png");
/*处理平铺:repeat-x就是x轴平铺 | repeate-y就是y轴平铺 | no repeate就是没有平铺*/
background-repeat: no repeat;
/*背景尺寸(这个不常用),会缩放背景图*/
/*background-size: 100px 200px;*/
/*背景定位,往右移10(x轴左右偏移)、往下移20(y轴上下偏移)(-10、20往左移10,往下移20)*/
background-position: 10px 20px;
/*以上所有功能的简写方法:这叫整体赋值*/
background: url("img/bg.png") red no-repeat 10px 20px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
2、精灵图操作实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>精灵图的操作</title>
<style>
body{
background-color: black;
}
.ele{
width: 372px;
height: 90px;
background-color: red;
/*这里使用参数简写:下面的图片移动写了一个0,没有px,0和px是一样的*/
background: url("img/bg.png") no-repeat 0 -155px;
/*加了这个就变成网上滚动的效果*/
transition: 1s;
}
.ele:hover{
/*这里添加一个鼠标悬停动画效果,y轴上移*/
background-position-y: -255px;
/*这里添加一个鼠标样式*/
cursor:pointer;
}
</style>
</head>
<body>
<div class="ele"></div>
</body>
</html>