(10)背景图片操作

精灵图的概念: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>

 

上一篇:android – MonoTouch / MonoDroid服务层不兼容?


下一篇:c# – ServiceStack Json反序列化错误