尚硅谷前端基础 (92)

好，那么接下来我们来一起看一下刚才那个问题啊，刚才那个问题呢，主要就是我们这个图片啊，它第一次切换的时候会发生这种闪烁的现象，而这个现象呢，虽然发生几率并不是那么高，也次数也不是那么频繁，只会发生一次啊，并且是在第一次访问的时候，但是的话，它的发生也会带来一个比较不好的用户体验，所以这个问题我们还是要处理一下的，那我们来写一个新的代码，直接新建一个文件，我们来一个零九，我们这个也是一个按钮练习啊，我们就叫一个按钮练习，第二一个HTMMR代码的话，其实还是以这个代码为基础啊，CTRLCTRLV给它粘过来啊，还是以这个代码为基础的，但是现在的话，它实际上还是会出现这种闪烁的问题，那我们现在要做的事儿呢，是要去解决这个闪烁的问题，对吧，那怎么解决，之前也给大家思路了，那其实就是我们要用这个图片，那这个片。

有什么特点诶，这个图片很简单，其实它是这三张图片的合体，诶实际上我们是把这三张图片合体成了什么呢？合体的成了这一张图片，那么合体成以后会有什么好处，那就是三个图片合成了一张图片，好处就是我们只需要加载一次即可把三张图片全都给它加载出来，那就避免了出现什么呢？就是我们在加载图片的时候，那个空隙出现这个闪烁的情况，所以那我们就需要把这个图片设置成我们它的背景图片，所以来在这里边我新建一个件夹，它的一个零九，然后呢，把这图片啊放到零九里，那这里边我们再用图片的时候，我就不能再用我们这个link呀，Ho呀，Active应该改成谁呢？哎，应该改成零九，下边我们叫做一个D tn.PNG，并且呢，由于这三张图片它都在一起呢，所以我所有的都换成它就完事了。

那这个时候我们换完图片，我们再看看它还会不会闪了啊，还会不会闪了啊，这少了一个膝盖还会不会闪了呢？我们来看效果，这直接诶移动点，移动点是不是就都不会发生闪烁的情况，哎，就都不会发生闪烁情况，就有效的避免了我们这个图片闪烁的问题，是不是很简单呀，哎，完美的解决这个问题啊，刚有同学说了，老师啊。你是不是又没看清楚啊，怎么就完美解决问题了，现在。诶点咦，不点有没有任何变化呀，哎，没有任何变化啊，没有任何变化，哎，因为现在注意了，现在是不闪了，但是把我们之前一个效果是不是也给废了，哎，也给废了，哎，那你这里边我们就要看到代码了，我写了一个非常有意思代码，Link的时候显示背图片是，这个后的时候显示背景图片，这个active显示背景图片是这也就是说在我显示图片的时候，我是不是都显示是这一张图片啊，那换句话说，我这个东西状态有没有发生变化，没有发生变化，Link ho active压根就是一张图片，所以这俩玩意儿啊，你写不写它都是什么呀，它都是一样的，因为你图片是压根就一张，没有发生变化，哎，所以写不写都是一样的，但是问题又来了，那现在我希望的是什么呢？我希望的是当我后时，你别这样，后的时候你应该干嘛呀？它默认情况下给我显的是第一张，当你的时候，你是不是应该给我显示的是第二张啊？

哎，那问题来了，我怎么让它去显示第二张，怎么显示第二张，我们想一下怎么显示第二张，那我现在等于是什么，等于我的这个B，我的这个A标签，它现在是不是这么大个啊，诶这么大个，那它默认的话显示的是我们图片这个左上角，那现在我想干嘛呢？我想显示的是这张图片，那我是不是应该把我的整个背景图片是不是要往往左移啊，哎，往左移，那往左移的话，我们想一下往左移我们应该怎么去让一个背景图片移动，哎，那实际上就是通过我们的background一个什么呢？Background position默认实际上它是一个零零的对吧，就是不动，所以这个时候你后面没有任何变化，那我希望的是什么呢？往左移啊，往左移的话，那我是应该移动调整顺平横轴这个值，哎，横轴这个值，那往左移这个值应该是正的还是负的呢？哎，很明显应该是一个负的，比如说我写一个负100像素。

诶100有点大是吧，我们来一个负50像素，那这个时候是把我元素往左移50个像素，垂直方向又没有移动，诶很明显垂直方向是固定不动的，对吧？所以这个时候我们来看效果啊，我再后面走一个，诶是不是就移动了，哎，就移动了，哎同学说这玩意儿都穿帮，穿不穿帮是另一回事，但是现在确实是当我们后的时候，图片是不是发生了。变化了，哎发生变化了，OK，是移动了，但是现在移动的距离是不是不够远呀，我现在移动的是50个像素，而50个像素可能刚好是是是这个位置，结果移动我们就是不是显示了这块了，哎，我们应该要的什么效果，是不是应该正好我这框在这儿，我应该把这个图片是不是正好移到这儿了呀？哎，那我移到这我应该是移多少？哎，是不是应该正好移的是一个这个按钮的大小，诶一个按钮是多大？一个按钮我们说了是一个93像素，所以我这应该移的是负93像素，正好把一个按钮给移过去，那这个时候我们再看效果一刷新。

走走走是不是就有这个效果了，哎，就有这个效果，那同理，那我们active呢，诶active我也是指移动水平方向，那这个时候我们应该移动多少呢？诶应该是移动两个图片，两个图片，那么就是186个，像那这里再看移动点走，移动点走是不是就完成了，诶那这里边你注意了它还会不会出现闪烁的情况，就不会了，为什么？因为这个时候这三张图片压根儿就是在一个图片里保存的，那你一加载是不是三个图片全都加载了，哎全都加载，所以注意解决什么呢？解决我们这个图片闪烁的问题。

哎，我们就按钮吧，就图片图片的一个闪烁的问题，我们是怎么解决的？哎，我们可以将我们这个多个图片，诶多个小图片啊，我们统一保存到一个什么呢？保存到一个大图片中啊大图片中，那这样我们的图片为什么呢？会同时加载到我们这个网页中，就什么呢？诶就可以有效的避免诶避免出现我们这个什么呀？哎，闪烁的问题啊，就可以有效的避免出现这个闪烁的问题，哎，那这个时候注意了，我不光光是保存到一个图片中啊，我可以将多个小图片保存到一个什么呢？保存一个大图片中，然后什么呢？然后诶通过调整我们这个叫做一个background position啊position，诶来什么呢？诶来。

显示我们这个相应的一个图片啊，相应图片什么意思呀，那就是说其实现在我们这个图片是一个大的对吧？一个大的，但是你这框只有这么小，它是不是只能显示一个局部啊，哎，那这个时候我们是通过background position来调整，诶你想显示谁，我把背景圈一移就显示第二个了，我再移就显示第三个了，哎，所以我通过调整这个图片的位置，来切换你显示图片的哪部分啊，来切换我们这个显示的图片，那这样什么呢？诶这样图片会同时加载到网页中，就可以有效的避免我们这个出现什么呀，闪烁的问题了，那这个问题，这个技术啊，这个技术在我们的什么呢？在网页中应用什么呢？十分广泛啊，应用十分广泛，诶被称为什么呢？诶被称为叫做CSSSP，哎，CSSSP也叫CS精灵，精灵不好记呢，有时候我们也叫它叫诶雪碧图啊这个。

图我们可以叫它雪碧图是吧？SP什么意思，SP就是雪碧的意思对吧？SP精灵雪碧的意思，所以这种技术我们经常会用到，而这个图呢？诶这种图，这种图我们什么呢？哎，我们称为雪碧的雪碧图，这个其实用的非常多，包括我们之前像我们做一个W3死故那个这个这个这个导航条，实际上它这块比较奇葩的是导航条，其实一般我们不用这玩意儿，但是比较奇葩的是在导航条这他也用了一个这个雪碧图做，我们来看一下他比较奇葩的地方，你看导航条是不是也是用了一个雪碧图啊，哎，他用了一个雪碧图去做的这么一个导航条啊，你说你看这玩意儿，你看是不是都是有很多小图片来构成的呀，哎，来构成的啊，所以是这么一个效果啊，这么一个效果好，那所以雪碧图这个技术呢，也也很简单，就是把一个什么呢，把一个把一堆图片存到一个文件里，然后通过不同的这。

的，诶position来切换，你想显示一个图片，比如说我举个例子，嗯，我这儿还有一个图片这个啊，这也是一个老图了，这是很早以前的了啊，从这个这这个呀，哎，这这。我们来拖到一个新的标签纸，很早以前的这个亚马逊官网的一个，你看啊，叫做Amazon的一个SP啊，亚马逊的一个官网的一个雪碧图啊，一个雪碧图，那这一块你会发现很明显它就是什么呢？它就是我们这个一组小图标是不是构成的这么一个图，哎，一组小图标构成的一个图，那这个图我们怎么用啊，这个图我们怎用，用起来其实非常简单，首先呢，哎，我们这来举例子，首先呀，我先把这个图啊给它拿过来，拖到我们这个项目下，那你要用这个图的话，首先我们来说一下一个用骤。

使用的一个步骤啊，它有什么步骤啊，有什么步骤，第一步，第一步先什么呢？诶先哎确定你要使用的图标啊，要使用的一个图标，咱们叫图标吧，一般都是图标，比如说像这里边是不是一堆啊，诶有它的大logo，有中logo，有小logo是吧？还有中文logo是吧？还有这种放大镜是不是有各种各样的图标啊哎，你先确定你要用的图标，那比如说我要用的就是这个，诶它这个，诶Amazon这个logo，这个图标啊，这个图标，那这个时候确定好我们图标以后，我们要干嘛呢？诶要测量我们这个图标的一个大小，哪个图标也就是说你要使用哪个，你就量哪个图标大小，比如说我要用这个logo的图标，那我们先量一下它大小，量一下，那比如说我就从头量了啊，最好确保它是在你那个宽的中间啊，大小是一个128乘以46啊，一百八乘以46，然后呢。

第三一个，诶根据测量结果，哎，来创建一个什么呢？哎，创建一个这个元素，哎，那所以在这儿我就直接写了啊，我直接写一个这个div div我们给他来一个class，叫做一个BOX1啊BOX1在这我们来写一下样式啊，点一个BOX1，点一个BOX1 box1的话，我们来看一下跟才们量的是多少，量的是一个128乘以一个46，所以我直接Y是一个128，然后呢，害的是一个14146，哎大小给它创建完了，然后第四一步啊第四一步将什么呢？哎，将我们这个诶雪碧图设置为我们这个元素的一个背景图片啊，这个时候你必须要设置啊，不要设背景片background ground的一个image，我们这是一个URLURL是谁呢？URL是我们的点，呃，点斜盖MG下的一个，这是零。

从909下的一个这个图片啊，我复制一下名CTRLCCTRLV，它这名还复制不过来啊F2改一下名CTRLC，然后给它粘过来，诶那这样是不是就设置完背景图片了，所以这时候你看我这个图是不是很好的，哎我这图啊设置大了，你看设置大完了以后就会出现这种情况，是不是出现它这个平铺了，哎平铺了，所以这个时候这个图片呢，我们大小应该是一个46，我写了一个146啊46应该是正合适，这样是不就正合适，就显示出这个logo了，哎就显示这个logo，当然我们这还没有写完啊，应该还有一个步叫什么呢？哎叫做哎叫做根据什么叫什么呢？诶设置一个这个偏移量，哎叫做什么呢？哎，偏移量以显示我们这个正确的一个图片，所以我们还要设置一个偏移量，叫做一个background position background position background，一个position。

I position我们一块其实就是一个零零，这都不用测了，但是我们这个例子比较省事，因为我取的是什么呢？我取的是我整个这个图的一个什么呀，左上角这个图片，所以它的正好就在我左上角，我们这夸默认是不是也在这个位置呀，所以这个时候它的偏移量就是零零，你写或不写都是正好就显示啥的啊，正好显示啥的，那假如说我用一个没有那么正的位置了怎么办呢？诶比如说我现在要用这个东西怎么办？其实是一样的啊，其实一样的我们来看一下啊，我们来看一下，那首先还是这个步骤，先来确定一下它的大小，大小，诶先确定我是不是要用它呀，哎，用它，然后来确定一下这玩意儿的大小。

量一下啊做。左上角儿，哎。这里边儿呢，我多拖了一个像素，多拖了一个像素，我们可以选择我们这个第三一个可以干嘛呢？可以把它从多的这块给它切掉啊，给它切掉，那现在它的大小就是一个这个42乘以30，所以在这儿我们创建一个新的，我这来一个BOX2。Box2.1个BOX2 box2是一个42是一个30啊，你看我们的第三步是不是也完事了，哎，完事了以后我们要将这个雪碧图设置为它的一个背景，但是这个时候你设置完这个背景就不那么正合适了，这会显示是一个安，诶我么冒出一个安来，哎，安什么玩意儿，安实际上是它的开头，就这这这这块看懂了吗？因为我们这框是不是设置比较小啊，而这个图片比较大，所以图片总就在这儿呢，我现在等于只显示了一个图片的一个左上角啊左上角那所以我们希望最终效果我们是要显示这个东西，哎，我先拖两条辅助线出来啊，但是我们好量一下上辅助线，我们希望的是显示这个东西，但是我们现在这个框显示的什么，现在我们这个框，它显示的是我的这个左上角是不是这一块，那注意了，框是不能动的，那你要想让它显示左上角显示我们这购物车，那其实你要做的事非常简单，就是把这个东西给它移到什么呢？移到这儿，诶把。

它移到这个位置自然就显示它了，所以我们要考虑的是我要移多少，那首先我们这个东西水平方向是不是要移这么多呀，哎，水平方向移这么多，那这么多是多多多少，我们可以量一下水平的距离。水平是一个58像素，所以这个时候它的background position background position X轴就是一个负的58，注意啊，一定是负值，因为它一定是往左移，你不可能往往往右移，你往右移就出现空白的，对吧，一定是往左移，所以这值一定是负值，负58像素，然后还有一个是我们垂直方向的值，对吧，垂直方向也就是高，我还得往上移啊，往上移多高，我们还是从这转一下。

没错，正合适，从这呢一直拽到我们顶部，看一下高是多少。高是一个量，338像素，所以垂直方向应该是一个负的338像素，那这样应该正好显示那个购物车，看懂这个效果了吗？哎，所以其实量的时候有一种比较简单的方式，因为我实际上就是想让我们的这个东西是不是就去到左上角啊，哎，所以你直接可以什么呢？你从左上角这儿直接往下一拽。往下一拽，拽到一个距离五十八三三八，那么水平方向你就移动58，垂直方向就移动338就行了，就正好是这个位置啊，正好这个位置，自己体会一下，其实这东西好理解，你就想象成什么呢？想象成我元素是一个框，而我的背景是干嘛呢？哎，是这个框的底边，注意我移动的是谁，移动是图片，框本身是不动的，背景从这个框里就透出来了，你这移到哪儿就显示什么呀，背景图片的哪个部分，哎，有点像什么呢？叫管中窥豹对吧？通过一个管子来看那个，看那个报是吧，可见一斑对吧，这么一个效果，这个东西呢，你还需要去熟练的去使用一下啊，当然需要去，需要去练习啊，需要去练习，那这里边主要是说我们对这个background position的一个使用，当然这个东西你也可以用这个background那个简写使属性来设置啊，简写属性来设，但是这个用简写属性其实呃也也可以啊，也可以自己自己自己可以改一下，一样啊一样没什么区别。

好，这个就是我们说雪碧图，然后再简单说一下啊，简单总结一下我们这个雪碧图的一个特点，雪碧图的一个特点啊，特点就是什么呢？特点第一个诶我们说了它一次性，诶它主要其实主要其实也不用说第几个吧，主要就这个特点就是一次性什么呢？一次性将我们这个什么呢？诶多个图片加载进页面，诶加载进我们这个页面，诶降低什么呢？降低哎我们这个请求的一个次数啊，次数加快我们这什么呢？哎，加快我们这个访问速度，提升我们这个用户验，诶提升我们用户的一个体验，它主要这么一个特点，你本来我以前我要发三个请求，现在我一个请求搞定了，是不是访问速度就快了啊，访问速度快了，并且还有一点你需要注意，我现在这个是我如果是之前我第一个做法，我要。

加载三个图片，第二个我只需要加载一个图片，哎，那我问你了，你像这一个图片其实跟这三个图片是等效的，但是这谁大呀，是这三个图片大呢，还是一个图片大呢？哎，很明显我们来看一下，三个图片加一起是一个16.6KB，而我一个图片呢，只有9.83KB，所以我把三个图片合到一起的话，也等于进一步的把我们图片给它压缩了，诶图片本身也小了，我们用起来也更加的方便，用户加载速度也会很快啊，所以总之呢，就是背景图，这个雪碧图呢，就是特点是吧，就是加快我们用户的访问速度，那这个时候如果你这小图标，小图标非常非常多，就可以直接用一个什么呀，用一个雪碧图啊，一般都是适用于小图标，但是它有局限，它的局限就是它只适用于背景图片，如果你是img雪碧图就不行了啊，雪碧图不行，好，那这个是我们简单的说一下雪碧图啊，关键点还是你要会怎么去用啊，怎么去用。

那你接下来可以做的事儿呢，就是诶我们这个给我给你的这个亚马逊这个雪碧图里边是不是有很多的小图片啊，啊可以自己尝试，比如说哎，我能不能显示一下这这箭头啊，诶自己来尝试着做一下啊好，我们先停一下。