作者：老九—技术大黍

社交：知乎

公众号：老九学堂（新人有惊喜）

特别声明：原创不易，未经授权不得转载或抄袭，如需转载可联系笔者授权

对话场景

学生：老师，在吗？能不能给我讲讲CSS分割图片的方法呀？有点懵。

老师：是通过i标签，把一个很多图标的图片，分割出来的那个吗？

学生：不是，是background:url("") X,Y坐标，我看很多网页设计都是这样写，但XY坐标毕竟只是一个点，怎么知道是那一张图片？应该说图片中的那一个部分

老师：那就是这个啥

老师：background-image以及background-position 它们分别的作用知道是什么意思吗？

学生：不太熟

老师：backgroun-image是设置背景图片、background-position是设置背景图片的位置，你可以先看看这两个样式的作用

学生：明白，但background-position是否也需要子绝对，父相对?

老师：不需要哦，那个是相对定位，这里是设置背景图片位置，跟相对和绝对没任何关系

老师：分割图片就是用这两个样式来实现的

学生：刚才的两个样式搞清楚了，能细讲一下如何分割的吗？

老师：我们就拿这张图来举例

老师：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>使用background分割图标</title>
</head>
<body>
<i></i>
</body>
</html>

现在网页中我只放了一个i标签，打开之后肯定是什么都没有的

一片空白

学生：嗯，明白

老师：接下来，我们先打开PS，拿到对应图标的宽高以及位置

老师：你说说，那张图片，你想要展示那个图标吧，你选一个

学生：就apple吧

老师：这个哇？

学生：对

老师：在PS里面，我们可以看到，苹果的宽高是30*36，单位是像素

老师：再看位置，苹果在x轴的位置是62，y轴的位置是310，单位依然是像素

老师：注意，这个位置是以苹果的左上角为参考的

学生：OK

老师：嗯，有了这两个数据，那么我们就可以开始写代码了

老师：嗯，有了这两个数据，那么我们就可以开始写代码了

老师：先把i标签设定为，行块布局方式，这样才能设置宽高，接着设置背景图片以及宽高

<style type="text/css">
 i {
     display: inline-block;
     background-image: url("./imgs/main_icons.png");
     width: 30px;
     height: 36px;
 }
</style>

老师：运行之后，我们看到，这里有一点点头

老师：从新回到PS，我们可以看到，这个头，其实就是放大镜的那点点

老师：也就是说，我们设置宽高之后，多余的被裁切了，这个没问题吧？

学生：没问题

老师：好，现在关键的来了

学生：用代码移动裁剪框？

老师：对对对，这张背景图片，我们只能看到，我们设定的宽高的区域，接下来，我们就通过background-position，移动背景图片

老师：把我们想要的那个图标，移动到这个现实区域就行了

老师：那移动多少呢？当然就是刚才我们测量的距离，也就是63*310

老师：那么背景图片，x轴是不是应该往左边移动63像素？

老师：往左边，是不是应该是-62px，同理，y轴是不是应该为-310px

<style type="text/css">
     i {
         display: inline-block;
         background-image: url("./imgs/main_icons.png");
         width: 30px;
         height: 36px;
         background-position: -62px -310px;
     }
 </style>

老师：现在我们看到，是不是苹果图标出来了？

学生：也就是说移动的是图片，X和Y轴是不动的？所以才是-的？

老师：我们移动的其实是那张背景图片，那个显示窗口其实是没变的，根据网页标准文档流原理，元素向左移动，就是负的

学生：懂了

最后

记得给大黍❤️关注+点赞+收藏+评论+转发❤️

作者：老九学堂—技术大黍

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

实战小技巧--看学生和老师实时对话 学CSS分割图片的方法

对话场景

最后

实战小技巧--看学生和老师实时对话学CSS分割图片的方法