css里2倍精灵图的使用方法

在移动端开发时，精灵图是2倍大的，然后我们把精灵图缩小，再显示，这样更清晰。因为现在手机的分辨率很高，不进行缩放就会模糊。

首先打开ps，将精灵图导入，选择图像，图像大小。
![此时的原图是2倍大的]

然后点击百分比，将宽度设为50%（高度不用改，会自己改过来）
![在这里插入图片描述]
此时的图片就是缩小到了我们想要使用的大小，记住此时图片的宽度是21px
![缩小后的图片]
然后点击窗口-信息，就能看到坐标轴
![]
选择你要的图片，然后就可以看到图片的宽和高，icon形状一般是正方形，此处我们采用21px 21px

然后我们需要知道图片的坐标，此处坐标应是 0px 36px

好啦，准备工作做完了，开始写代码～

.user {
    width: 44px;
    height: 44px;
    background-color: tomato;
}

.user::before{
    content: "";
    display: block;
    /* 我们需要的图片的大小 */
    width: 21px;
    height: 21px;
    /* 精灵图的坐标 此处y轴坐标是负的 图片往上走 */
    /* 才能得到我们需要的那个小人 */
    background: url(../img/home-common.png) 0px -36px no-repeat;
    /* 精灵图的大小，只写宽度，高度自适应 */
    /* 记住此处的大小是我们对图片进行缩小后的大小 */
    background-size: 21px auto;
}

最后效果
![在这里插入图片描述]
最后，一定不要操作结束之后不要选择保存更改。。。在代码里的图片还是原来的那个2倍精灵图！！！我们只是在代码里对它进行了缩小，目的是为了在手机上显示得更清晰～