标签:集成 osi icon 文件 width enter 加载 ack icon大小
在加载图片时,每加载一次,就向网络中发送一次请求
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;
}
标签:集成 osi icon 文件 width enter 加载 ack icon大小
原文地址:http://www.cnblogs.com/roxy/p/7395088.html