精灵图也称雪碧图,前端开发时设计师可能会把用到的很多小图放在一起,组成一张图,开发人员在使用的时候自己去取想要的内容。
(图源网络,侵删)
这张图中有很多小图片,比如我想取第二行第三个图片,分为四步
首先,设置图片为背景图,用一个盒子将图片框起来,最好设置一下边框,将图片位置显示的更清楚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 600px;
height: 600px;
border: 2px solid black;
background: url("imgs/精灵图.jpg") no-repeat;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
其次,将想要的部分放在页面右上角,这一步要用到谷歌浏览器的调试功能,修改background-position属性值,找到合适的位置。
此处,需要注意的是,背景图中的属性值可以利用速写属性background统一书写,书写顺序除了background-position与background-size外没有特别要求。因为background-position与background-size都有数值表示方法,写在一起分辨不出,所以规定为先写background-position属性值,然后加“/”,再写background-size属性值。此处精灵图中并未用到图片尺寸。
之后,就是改变盒子的尺寸,先用谷歌浏览器的调试功能调整到只有想要的部分即可
最后,把前两步测试出的数值改到代码中,并去掉边框,图片就只有想要的那一部分了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 136px;
height: 107px;
background: url("imgs/精灵图.jpg") no-repeat -337px -196px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
如果想要移动图片的位置,移动盒子的位置即可,比如,改变margin值