问题复现：现在我有一张图片，图片中有许多的小图标，问题是我怎么把我所需要的小图标显示出来呢？
解决方法：在一个块级标签中 插入一张背景图片(利用background-image实现)，然后在利用background-position进行移动来得到你需要的小图标
图中每个小图标的宽高都是30px，
现在我要显示的是一个警徽小图标，那么相对应的代码如下：
（警徽距离初始点的高为-88px 宽为-20px【都是相对于原来来计算宽高的,原点就是图片的左上角，在原点下方和有右方的均为负坐标，相反就为正坐标】）
<!DOCTYPE html>
<html>
<head>
<title>icon图标的获取</title>
<meta charset="utf-8">
<style>
.icon{
width: 30px; /*设置盒子宽度 应该和图片中的图标的具体大小相一致*/
height: 30px; /*设置盒子高度 应该和图片中的图标的具体大小相一致*/
border: 1px red solid; /*设置盒子的边框，方便大家理解*/
background-size: 256px 256px;/*设置背景图片的大小*/
background-image: url(img/sprite2.png);/*设置背景图片的路径*/
background-position: -20px -88px;/*设置背景图片的偏移位置(也就是我们所需要显示的小图标的具体的位置 宽度 高度)*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
