1、打开vscode，创建一个html页面。
2、在测试页面的同级目录，添加一张演示图片。
3、在测试页面中添加一个div标签，在标签内部添加一个img图片标签，设置图片的src地址。
4、在div的标签中，直接书写css的样式，设置div的宽度为500像素，高度为300像素，边框为1像素的红色框。再次在浏览器中打开，就可以看到图片，并没有填满整个div的空间。
5、想要让图片充满整个div，只需要对图片设置高宽都是100%即可。此处为了演示，将所有的img标签都设置成了100%，而且，使用的是外部css的书写形式。
6、如果图片使用的是背景图，不是img标签的形式，图片默认会在x和y轴重复，并不会拉伸，最终仍然填满了这个div的空间。
7、如果想要背景图也拉伸填满整个div空间，就需要设置背景图的，background-size: 100% 100%。
CSS雪碧的设计思想是将所有需要用到的图标、小图片等汇聚到一张图片上，通过CSS定位来调取需要的图像。所以你应该抛弃任何PSD已形成好的图片布局，也就你把需要的小图片都一一导出来。然后新建一个专门用于雪碧的源文件，比如第一行16px高度这个逻辑区域，用于排列所有16px高的ICO图片，以此类推，这样在逻辑上你会很清楚，哪个区域放什么类别的图片，而不是各种大小不一类别不同的图片混合排进去，那样会很乱的，不利于你以后对这个雪碧大文件的维护。
