精灵图
把多个小图标放在一张图片上，减少浏览器加载图片的时间，通过代码控制显示哪一个小图标
方法一：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 25px;
height: 25px;
background-image: url(img/20160404213159853.jpg);
background-position: -40px -75px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
方法二：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.tree-default{
width:32px;
height:32px;
}
.tree-file{
background: url("images/tree_icons_32px.png") -100px -68px no-repeat;
}
.tree-folder{
background: url("images/tree_icons_32px.png") -260px -4px no-repeat;
}
</style>
</head>
<body>
<div class="tree-default tree-file"></div>
<div class="tree-default tree-folder"></div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018/07/17 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
