1回答

好帮手慕粉

2020-02-08

同学你好，就拿我们挂号平台的小图片来说：

1、小图标的宽为22px：

2、小图标是被固定在一个位置的，被放在了a元素的伪元素里面，这个伪元素的宽高和位置是我们固定好的，如下：

所以有没有设置背景图，a元素的伪元素都会在那占着位置，下面我们来填充小图标的背景图片，设置背景图，因为在鼠标没有移入时，背景色是蓝色，默认左上角对齐，也就是下面这张图片，我们想得到紫色框圈住的图标：

那么就要让背景图向左移22px，即-22px。那么就得到了第一个小图标。当鼠标移上时，背景色为白色，那么我们就需要黄色框圈住的小图标：

这个图标的默认位置就是图片的0，0位置，所以鼠标移入时直接将背景位置设置为0即可。

3、现小节老师还没有讲到，在下面的小节中会涉及到：https://class.imooc.com/lesson/802#mid=20188

建议同学自己写代码敲一敲，打开控制台调整一下，练着练着就知道图片怎么定位的了。

如果我的回答帮助了你，欢迎采纳，祝学习愉快~

0