问题复现:现在我有一张图片,图片中有许多的小图标,问题是我怎么把我所需要的小图标显示出来呢?
解决方法:在一个块级标签中 插入一张背景图片(利用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>