精灵图技术
Posted 耍流氓的兔兔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了精灵图技术相关的知识,希望对你有一定的参考价值。
在加载图片时,每加载一次,就向网络中发送一次请求
icon为小图标,同样需要向网络发送请求
为了节省网络资源,将页面中需要用到的icon集成到一张图中,使用时,只需发送一次请求即可
在css文件中使用时,只需要使用到icon在整张图中的相对位置即可,使用background-position:;是icon显示出来
<body> <div class="icon icon-1"></div> <div class="icon icon-2"></div> </body>
.icon{
background-color: #ccc;
/*将精灵图设为背景图片*/
/*背景透明的图片后缀为png*/
background-image: url(../img/index.png);
/*设置背景图片不平铺*/
background-repeat: no-repeat;
}
.icon-1{
width: 600px;
height: 600px;
/*图片在容器中的位置*/
/*背景居中*/
background-position: center;
}
.icon-2{
/*icon大小*/
width: 55px;
height: 55px;
background-position: -187px 0px;
}
以上是关于精灵图技术的主要内容,如果未能解决你的问题,请参考以下文章